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.