Home
Michael Andreuzza
dismissible cookie banner with Tailwind CSS and Alpinejs

dismissible cookie banner with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Card Cookie consent

Author Michael Andreuzza

2.5k

7

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section>
 <div class="max-w-7xl mx-auto px-8 md:px-12 lg:px-32 py-24 flex flex-col justify-center h-svh">
  
  <div x-data="{ showAlert: true }" x-init="$nextTick(() => { if (showAlert) $refs.firstButton.focus() })" x-show="showAlert" role="dialog" aria-labelledby="cookieBannerTitle" aria-describedby="cookieBannerDesc">
   
   <div class="mx-auto p-8 lg:p-10 bg-white rounded-3xl ring-1 ring-gray-200 ring-inset shadow-2xl max-w-lg text-center"> <img src="https://i.pinimg.com/originals/ef/86/cf/ef86cfbac3952cbfdaacb66e8ca3b685.gif" alt="Cookies" class="w-32 h-32 mx-auto rounded-full -mt-24">
    <h2 id="cookieBannerTitle" class="text-2xl font-medium mt-8">
     Our website uses cookies
    </h2>
    <p id="cookieBannerDesc" class="mt-4 text-gray-500">
     Our website uses cookies. By continuing, we assume your permission
     to deploy cookies as detailed in our
     <a href="#_" class="underline hover:text-orange-600 text-black">Privacy Policy.</a>
    </p>
    
    <div class="mt-8"> <button x-ref="firstButton" @click="showAlert = false" class="rounded-full bg-orange-600 px-8 py-2 h-12 text-sm font-semibold
              text-white hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500
              focus:ring-offset-2">
      Accept all cookies
     </button> </div> 
    <div class="mt-4"> <a href="#_" class="text-sm text-orange-600 hover:text-orange-500">Manage cookies</a> </div>
   </div>
  </div>
 </div>
 <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
  <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
   <div class="flex w-0 flex-1 items-center p-4">
    <div class="w-full">
     <p class="text-sm font-medium text-neutral-900">Tutorial</p>
     <p class="mt-1 text-sm text-neutral-500">
      How to create a dismissible cookie banner with Tailwind CSS and
      Alpinejs
     </p>
     <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com"> by © Lexington Themes</a> </p>
    </div>
   </div>
   <div class="flex">
    <div class="flex flex-col divide-y divide-neutral-200">
     <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-dissmisable-cookie-banner-with-tailwind-css-and-alpinejs" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
     <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/cookie-banner/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
    </div>
   </div>
  </div>
 </div>

Related Examples

macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

171
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

28.6k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
avtarCard3

Author:
pablitodgb

4 months ago

600
split bg

Author:
Anonymous

4 months ago

355
User Card

Author:
Md. Tofayel islam

10 months ago

1.1k
Minimal cookie consent popup
notification bar placed at the bottom center of the screen

Author:
Carla Hoffman

1 year ago

2.6k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

8 months ago

1.6k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

4 months ago

588
SimpleGrid

Author:
wtfbrh

8 months ago

797
Cookie banner

Author:
Anonymous

10 months ago

1k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

8 months ago

675

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12