<section class="py-20">
<div class="container px-4 mx-auto">
<div class="p-12 bg-gray-50 rounded-lg">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full md:w-1/2 px-4">
<div class="max-w-md lg:ml-auto mb-5 lg:mb-0">
<h3 class="mb-1 text-3xl font-bold font-heading">Sign up to our newsletter</h3>
<p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="w-full md:w-1/2 px-4">
<form action="#">
<div class="flex max-w-md">
<input class="w-full pl-3 py-3 mr-2 bg-white rounded" type="email" placeholder="Type your e-mail">
<button class="inline-block px-6 py-2 text-sm text-white font-bold leading-loose bg-gray-600 hover:bg-gray-700 rounded transition duration-200">Action</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
