Web Components Library

Simple Justified

No notes defined.

  • Handle: @tw-ui-split-with-image
  • Preview:
  • Filesystem Path: components/10-other-examples/tailwind-ui-components/cta/split-with-image.hbs 
<div class="flex flex-col sm:flex-row shadow-2xl bg-white">

    <div class="flex-1 flex justify-center items-center">
        <img class="object-cover h-full" src="https://source.unsplash.com/random/800x600" alt="Random Image">
    </div>

    <div class="flex-1 flex items-center">

        <div class="p-8 mb-12">

            <div class="uppercase mt-8 text-sm">
                Award Winning Support
            </div>

            <div class="text-3xl font-semibold">
                We&#x27;re here to help
            </div>

            <div class="mt-1">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>

            <div class="mt-4">
                <button class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-2 px-4 rounded">
                    Visit the Help Center
                </button>
            </div>

        </div>

    </div>

</div>
 
<div class="flex flex-col sm:flex-row shadow-2xl bg-white">

  <div class="flex-1 flex justify-center items-center">
    <img class="object-cover h-full" src="https://source.unsplash.com/random/800x600" alt="Random Image">
  </div>

  <div class="flex-1 flex items-center">

    <div class="p-8 mb-12">

      <div class="uppercase mt-8 text-sm">
        {{ text1 }}
      </div>

      <div class="text-3xl font-semibold">
        {{ text2 }}
      </div>

      <div class="mt-1">
        {{ text3 }}
      </div>

      <div class="mt-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white text-sm py-2 px-4 rounded">
          {{ buttontext }}
        </button>
      </div>

    </div>

  </div>

</div>
 
{
  "text1": "Award Winning Support",
  "text2": "We're here to help",
  "text3": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "buttontext": "Visit the Help Center"
}