<div class="fixed bottom-0 right-0 z-50 px-4 lg:px-10 pb-16">
<div class="relative p-14 bg-gray-500 rounded-xl">
<div class="absolute top-0 -mt-6 left-0 ml-12 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full md:w-auto px-4 mb-4 lg:mb-0">
<h3 class="mb-2 text-2xl font-bold font-heading text-white">Cookie Policy</h3>
<p class="max-w-xs text-gray-200 leading-loose">By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation...</p>
</div>
<div class="w-full md:w-1/3 px-4 flex">
<a class="inline-flex ml-auto items-center px-8 py-4 mr-2 text-lg text-white hover:text-gray-100 font-bold" href="#">
<span>More</span>
<svg class="ml-3 w-6 h-4" width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.0851 7.66792L19.398 14.355L18.5621 13.5192L24.242 7.83927L0.590432 7.84345L0.590431 6.66485L24.242 6.66067L18.98 1.39873L19.8159 0.562843L26.0851 6.83202C26.3159 7.06286 26.3159 7.43708 26.0851 7.66792Z" fill="white"></path>
</svg>
</a>
<a class="inline-block px-12 py-4 text-lg bg-transparent text-white font-bold border border-gray-300 hover:border-gray-200 rounded-full" href="#">Accept</a>
</div>
</div>
</div>
</div>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 80
- Application 80
- Banner 20
- Blog 100
- Call to action 152
- Careers 20
- Contact 76
- Content 65
- Cookies 79
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 66
- Features 170
- Footers 100
- Graphs 19
- HTTP codes 77
- Headers 122
- How it works 99
- Logo clouds 120
- Modals 8
- Navbar 44
- Navigation (horizontal) 146
- Navigation (vertical) 2
- Newsletter 87
- Portfolio 77
- Pricing 94
- Reviews 10
- Rich text 3
- Sign in / Sign up 120
- Stats 115
- Tables 56
- Team 85
- Testimonials 107
- Users 17
Component #1
Everyone needs to collect cookies. With these simple messages, you will collect consents without scaring users away. Fit Tailwind components cookies into your page layout without friction.
On this subpage, you can browse the different Tailwind cookies component themes that are available in our UI libraries. You will also find many other types of components that will follow a similar style. Each of these libraries has been developed by experienced designers along with our in-house development team.
Get access to all Tailwind cookies components, code and our editor. Test the editor demo for free.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
