Responsive Newsletter Components: Best Examples with Code
Explore exceptional examples of responsive newsletter components with practical code demonstrations in this comprehensive guide.
1- Responsive Newsletter Component with Dark Background and Image
HTML Code:
<div class="flex min-h-screen items-center justify-center bg-gray-900 font-sans text-white">
<!-- Container for Newsletter Subscription -->
<div class="flex container mx-auto mt-8 flex-wrap justify-center px-4">
<!-- Newsletter Subscription Card -->
<div class="mx-4 my-4 max-w-2xl overflow-hidden rounded-lg bg-opacity-80 bg-[url('https://images.unsplash.com/photo-1547127796-06bb04e4b315?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8ZGFyayUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60')] bg-cover bg-center p-6 shadow-md">
<div class="flex mb-4 flex-col gap-4 sm:flex-row">
<div class="sm:w-1/2">
<img src="https://images.unsplash.com/photo-1596526131083-e8c633c948d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bmV3c2xldHRlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="Newsletter Image" class="h-full w-auto rounded" />
</div>
<div class="sm:w-1/2">
<h2 class="mb-4 text-center text-2xl font-semibold text-white sm:text-left">Subscribe to Our Newsletter</h2>
<p class="mb-4 text-center text-gray-300 sm:text-left">Stay up to date with our latest news and updates by subscribing to our newsletter.</p>
<!-- Subscription Form -->
<form>
<div class="mb-4">
<input type="email" placeholder="Your Email" class="w-full rounded-md bg-gray-800 px-4 py-2 text-white focus:border-blue-300 focus:outline-none focus:ring" />
</div>
<div>
<button type="submit" class="w-full rounded-md bg-orange-500 py-2 text-white transition duration-300 ease-in-out hover:bg-orange-600">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Newsletter Subscription Card -->
</div>
</div>