<section class="relative py-20 md:py-24 overflow-hidden">
<img class="absolute top-0 left-0" src="saturn-assets/images/newsletter/light-left-top-double.png" alt="">
<div class="relative container px-4 mx-auto">
<div class="max-w-7xl mx-auto">
<div class="flex flex-wrap -mx-4 items-center">
<div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
<div class="relative z-10 max-w-lg mx-auto">
<h4 class="font-heading text-4xl sm:text-5xl lg:text-6xl text-gray-900 font-bold mb-6">Sign up for our newsletter</h4>
<div class="md:flex mb-16">
<div class="mb-6 md:mb-0 md:mr-8 pt-2 text-gray-600">
<svg width="84" height="10" viewbox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4.5C0.585786 4.5 0.25 4.83579 0.25 5.25C0.25 5.66421 0.585786 6 1 6L1 4.5ZM84 5.25001L76.5 0.919879L76.5 9.58013L84 5.25001ZM1 6L77.25 6.00001L77.25 4.50001L1 4.5L1 6Z" fill="#1E2238"></path>
</svg>
</div>
<div class="max-w-xs">
<p class="text-lg font-semibold text-gray-400">Stay in the loop with everything you need to know.</p>
</div>
</div>
<div class="sm:flex items-center">
<input class="w-full mb-3 sm:mb-0 sm:mr-4 py-3 px-4 text-sm text-gray-900 placeholder-gray-400 border border-gray-200 focus:border-purple-500 focus:outline-purple rounded-lg" type="email" placeholder="[email protected]">
<button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 rounded-md overflow-hidden" type="submit">
<div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
<div class="relative flex items-center justify-center">
<span class="mr-4">Subscribe</span>
<svg width="8" height="11" viewbox="0 0 8 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.82994 5.04001L2.58994 0.80001C2.49698 0.706281 2.38638 0.631887 2.26452 0.581118C2.14266 0.530349 2.01195 0.504211 1.87994 0.504211C1.74793 0.504211 1.61723 0.530349 1.49537 0.581118C1.37351 0.631887 1.26291 0.706281 1.16994 0.80001C0.983692 0.987372 0.87915 1.24082 0.87915 1.50501C0.87915 1.7692 0.983692 2.02265 1.16994 2.21001L4.70994 5.75001L1.16994 9.29001C0.983692 9.47737 0.87915 9.73082 0.87915 9.99501C0.87915 10.2592 0.983692 10.5126 1.16994 10.7C1.26338 10.7927 1.3742 10.866 1.49604 10.9158C1.61787 10.9655 1.74834 10.9908 1.87994 10.99C2.01155 10.9908 2.14201 10.9655 2.26385 10.9158C2.38569 10.866 2.4965 10.7927 2.58994 10.7L6.82994 6.46001C6.92367 6.36705 6.99806 6.25645 7.04883 6.13459C7.0996 6.01273 7.12574 5.88202 7.12574 5.75001C7.12574 5.618 7.0996 5.48729 7.04883 5.36543C6.99806 5.24357 6.92367 5.13297 6.82994 5.04001Z" fill="currentColor"></path>
</svg>
</div>
</button>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-4">
<div class="relative pl-20 lg:pl-16 xl:pl-0 max-w-lg mx-auto">
<img class="absolute w-125 h-125 object-contain bottom-0 left-0 -mb-32 sm:-mb-0 -ml-8 xs:-ml-20 md:-ml-40 lg:-ml-24 xl:-ml-52" src="saturn-assets/images/newsletter/circle-star-bg.png" alt="">
<img class="relative block w-full xl:max-w-sm lg:ml-auto" src="saturn-assets/images/newsletter/image-yellow-ghost.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 113
- Banners 76
- Benefits 16
- Blog 143
- Brands 3
- Breadcrumbs 27
- Call to action 227
- Cards 43
- Careers 34
- Contact 117
- Content 90
- Cookies 104
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 65
- E-commerce (products) 101
- Empty state 4
- FAQ 103
- Features 263
- Footers 163
- Forms 9
- Graphs 58
- HTTP codes 119
- Hero section 184
- How it works 135
- Instagram photos 9
- Integrations 8
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 241
- Navigation (vertical) 12
- Newsletter 138
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 141
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Search 3
- Sign in / Sign up 201
- Snackbars 10
- Stats 173
- Steps 12
- Tables 91
- Tabs 2
- Team 122
- Testimonials 160
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Newsletters are the bread and butter of any business. Our Tailwind components newsletter will allow you to build your mailing base effectively.
Choose from many variations of the Tailwind components newsletter. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Tailwind components newsletter, code and our editor. Try the demo for free.
