<div class="fixed top-0 left-0 right-0 pt-20 z-50">
<div class="container mx-auto px-4">
<div class="max-w-xl mx-auto">
<div class="p-8 md:p-16 bg-black border">
<h2 class="mb-4 text-2xl text-white font-heading">Sign up to our newsletter</h2>
<p class="mb-6 text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<form action="">
<div class="mb-6">
<input class="w-full py-4 px-6 bg-black rounded-full border text-white font-bold outline-none placeholder-white" type="email" placeholder="Type your e-mail">
</div>
<div class="flex flex-wrap justify-center md:justify-start">
<a class="inline-flex justify-center w-full md:w-auto mb-6 lg:mb-0 md:mr-8 items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
<svg class="mr-3" width="16" height="9" viewbox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
</svg>
<span class="text-sm font-heading">Sign up now</span>
</a>
<a class="inline-flex items-center text-white hover:underline" href="#">
<span class="mr-2 text-sm font-heading">No, thanks</span>
<svg width="16" height="10" viewbox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
</svg>
</a>
</div>
</form>
</div>
</div>
</div>
</div>Framework
Tailwind
UI Library
All Libraries
Components
- Alert 80
- Application 46
- Banner 10
- Blog 65
- Call to action 113
- Contact 48
- Content 48
- Cookies 46
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 52
- Features 108
- Footer 65
- Graphs 9
- HTTP codes 39
- Headers 88
- How it works 73
- Logo clouds 80
- Modals 2
- Navbar 28
- Navigation (horizontal) 113
- Navigation (vertical) 2
- Newsletter 52
- Portfolio 66
- Pricing 62
- Reviews 5
- Sign in / Sign up 73
- Stats 45
- Ta general tables 7
- Tables 25
- Team 52
- Testimonials 68
- Users 17
Communicate to your users the need to take an action or confirm an action. Tailwind modals components will allow you to easily convey the message you want.
Browse and choose one variant from Tailwind components modals. They are UI library components created by our talented designers and coded by our development team. Don't forget to take a look at alerts and banners sections - you'll find other components with similar purpose there.
Buy a subscription to get access to the drag and drop editor, all UI libraries and code under each component.
Component #1
Component #2
