<section class="py-24 md:py-36 bg-gray-50">
<div class="container mx-auto px-4">
<div class="mb-20 max-w-2xl mx-auto text-center">
<h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold text-center">Stay in touch</h2>
</div>
<div class="p-8 py-24 max-w-4xl mx-auto bg-white rounded-3xl">
<h2 class="mb-6 font-heading text-3xl md:text-4xl font-medium text-center">Newsletter</h2>
<p class="mb-20 text-lg text-gray-500 font-medium text-center max-w-xl mx-auto leading-normal">Subscribe to our newsletter and receive the latest news and exclusive insight every week.</p>
<div class="relative p-1.5 max-w-md mx-auto bg-gray-50 rounded-2xl md:rounded-full focus-within:ring-4 focus:ring-blue-200 transition duration-200">
<div class="relative">
<input id="newsletter-input-01-1" type="text" class="py-4 md:pl-11 md:pr-44 w-full text-black placeholder-black font-semibold text-center md:text-left bg-transparent outline-none" placeholder="Your email address">
<a href="#" class="md:absolute md:top-0 md:right-0 inline-flex justify-center items-center text-center w-full md:w-auto h-14 md:h-full py-2 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-2xl md:rounded-full transition duration-200">Get started</a>
</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
