<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
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
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 #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
