<section class="py-16">
<div class="container px-4 mx-auto">
<div class="pt-12 pb-14 px-8 sm:px-24 bg-green-500 rounded-md">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
<h2 class="max-w-xs font-heading text-3xl sm:text-4xl text-white mb-4">Sign up to our newsletter</h2>
<p class="text-lg text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="w-full lg:w-1/2 px-4">
<form action="">
<div class="md:flex lg:max-w-md ml-auto">
<input class="block flex-grow-1 w-full py-4 px-6 mb-4 md:mb-0 sm:mr-4 font-heading text-green-50 bg-green-600 placeholder-green-100 outline-none rounded-sm" type="email" placeholder="Type your e-mail">
<button class="inline-block flex-shrink-0 w-full md:w-auto py-4 px-6 text-center font-heading font-medium text-base bg-white hover:bg-gray-50 rounded-sm transition duration-200" type="submit">Sign up</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
