<section class="py-20 bg-black overflow-hidden">
<div class="relative container mx-auto px-4">
<div class="flex flex-wrap justify-center items-center">
<div class="z-10 w-full md:w-1/2">
<div class="max-w-md">
<h2 class="mb-2 text-4xl text-white font-heading">Sign up to our newsletter</h2>
<p class="mb-10 text-xl text-gray-500">Take a big step forward in growing your business with this great tool.</p>
</div>
<div class="flex px-8 py-4 bg-black rounded-full border border-white">
<input class="w-full bg-transparent text-white placeholder-white outline-none" type="email" placeholder="Type your e-mail">
<button class="flex items-center text-yellow-300 hover:text-yellow-400">
<span class="mr-2">Go</span>
<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3H0V5H12.01V8L16 4L12.01 0V3Z" fill="currentColor"></path>
</svg>
</button>
</div>
</div>
<div class="relative w-full md:w-1/2 md:-ml-64">
<img class="absolute top-0 left-0" src="boldui-assets/elements/shadow-blue-full.svg" alt="">
<div class="clip-path-2 transform rotate-45">
<img class="h-full w-full transform -rotate-45 object-cover" src="boldui-assets/images/photo-women.png" alt="">
</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
