<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
All Frameworks
UI Library
All Libraries
Components
- Alert 85
- Application 122
- Banner 20
- Blog 159
- Call to action 263
- Contact 97
- Content 14
- Content 128
- Cookies 105
- E-commerce (orders) 28
- E-commerce (products) 48
- FAQ 108
- Features 324
- Footer 125
- Footers 10
- Graphs 18
- HTTP codes 99
- Headers 226
- How it works 135
- Logo clouds 184
- Modals 9
- Navbar 68
- Navigation (horizontal) 238
- Navigation (vertical) 10
- Newsletter 113
- Portfolio 126
- Pricing 118
- Projects 9
- Reviews 10
- Sign in / Sign up 174
- Stats 107
- Ta general tables 7
- Tables 52
- Team 103
- Testimonials 130
- Users 25
Modals Components by Shuffle
Choose from 9 variations of Modals UI components. Presented here are variants available in various UI libraries.
Get access to all alert UI components, code and our visual editor. Try the demo for free!
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
