Web Components Library

Simple Centered

No notes defined.

  • Handle: @tw-ui-simple-centered
  • Preview:
  • Filesystem Path: components/10-other-examples/tailwind-ui-components/cta/simple-centered.hbs 
<div class="bg-gray-50 border-b-4">
    <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 tems-center ">
        <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 text-center">
            Ready to dive in?
            <br />
            <span class="text-indigo-600">Start your free trial today.
            </span>
        </h2>
        <div class="mt-8 text-center">
            <div class="inline-flex rounded-md shadow">
                <a href="#" class=" items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                    Get started
                </a>
            </div>
            <div class="ml-3 inline-flex rounded-md shadow">
                <a href="#" class="items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                    Learn more
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="bg-gray-50 border-b-4">
  <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 tems-center ">
    <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 text-center">
      {{ text1 }}
      <br />
      <span class="text-indigo-600">{{ text2 }}
      </span>
    </h2>
    <div class="mt-8 text-center">
      <div class="inline-flex rounded-md shadow">
        <a href="#"
          class=" items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
          {{ text3 }}
        </a>
      </div>
      <div class="ml-3 inline-flex rounded-md shadow">
        <a href="#"
          class="items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
          {{ text4 }}
        </a>
      </div>
    </div>
  </div>
</div>
 
{
  "text1": "Ready to dive in?",
  "text2": "Start your free trial today.",
  "text3": "Get started",
  "text4": "Learn more"
}