<section class="pt-12 lg:py-20 relative overflow-hidden">
<div class="hidden lg:flex items-center absolute top-0 right-0 h-full lg:w-1/4 xl:w-1/5 bg-teal-900">
<div class="relative xl:h-full transform -translate-x-1/2 rounded-full overflow-hidden flex-shrink-0">
<img class="block xl:h-full" src="flow-assets/newsletter/circle-green-image.png" alt="">
<img class="absolute top-0 right-0 w-1/2 h-full transform scale-105" src="flow-assets/newsletter/half-circle-photo.png" alt="">
</div>
</div>
<div class="container mx-auto px-4 relative">
<div class="max-w-lg xl:max-w-2xl lg:pr-6 xl:w-3/5 mx-auto lg:mx-0">
<h1 class="font-heading text-5xl xl:text-6xl mb-6">Your Source for Green Energy Updates</h1>
<p class="lg:max-w-md xl:max-w-none text-lg text-gray-700 mb-10">Stay in the loop with our Green Horizon newsletter, where we deliver bite-sized insights into the latest green energy solutions.</p>
<div class="flex flex-col sm:flex-row lg:max-w-md xl:max-w-none">
<input type="email" class="h-14 w-full px-4 py-3 placeholder-gray-700 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full" placeholder="Your e-mail...">
<a href="#" class="flex-shrink-0 h-14 inline-flex mt-3 sm:mt-0 sm:ml-2 py-2 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Get in touch</a>
</div>
</div>
</div>
<div class="lg:hidden flex items-center mt-12 ml-auto w-2/5 bg-teal-900">
<div class="relative xl:h-full transform -translate-x-1/2 rounded-full overflow-hidden">
<img class="block xl:h-full" src="flow-assets/newsletter/circle-green-image.png" alt="">
<img class="absolute top-0 right-0 h-full transform scale-105" src="flow-assets/newsletter/half-circle-photo.png" alt="">
</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
