CTAs
Section: CTA 01
Contained content justified between
<section class="text-wireframe py-12">
  <div class="container">
    <div class="flex flex-col md:flex-row md:justify-between">
      <div>
        <h2>This is a call to action</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
      </div>
      <div>
        <div class="my-2 flex space-x-4">
          <a href="#" class="border-2 border-wireframe px-4 py-2">Button Title 1</a>
          <a href="#" class="border-2 border-wireframe px-4 py-2">Button Title 2</a>
        </div>
      </div>
    </div>
  </div>
</section>

This is a call to action

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Section: CTA 02
Full width background with contained content center aligned
<section class="text-wireframe bg-gray-100 py-12 relative">
  <div class="container">
    <div class="flex flex-col justify-center text-center">
      <div>
        <h2>Another call to action</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
      </div>
      <div class="flex items-center justify-center">
        <div class="my-2 flex space-x-4">
          <a href="#" class="border-2 border-wireframe px-4 py-2">Button Title 1</a>
          <a href="#" class="border-2 border-wireframe px-4 py-2">Button Title 2</a>
        </div>
      </div>
    </div>
  </div>
</section>

Another call to action

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Section: CTA 03
Contained content with form
<section class="text-wireframe py-12">
  <div class="container">
    <div class="flex flex-col md:flex-row md:justify-between md:space-x-12">
      <div class="w-full sm:w-7/12">
        <h2>Subscribe to our newsletter</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
      </div>
      <div class="w-full sm:w-5/12">
        <form class="mt-6 sm:flex sm:max-w-md">
          <label for="email-address" class="sr-only">Email address</label>
          <input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 appearance-none border-0 bg-white px-3 py-1.5 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-wireframe sm:w-64 sm:text-sm sm:leading-6 xl:w-full" placeholder="Enter your email">
          <div class="mt-4 sm:ml-4 sm:mt-0 sm:flex-shrink-0">
            <button type="submit" class="flex w-full items-center justify-center bg-wireframe px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-wireframe">Subscribe</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Subscribe to our newsletter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.