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 v3.4. It is responsive.

Card Cookie consent

Author Michael Andreuzza

Tailwind v3.4 3k 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

Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Uwase Alliance

1 year ago

918
Info Card
info card with description

Prashant

4 years ago

13.4k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.5k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Ahmath S.

1 year ago

1.1k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.7k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Group hover card
article card

Sienna

3 years ago

12.3k
Battery and signal
Battery and signal bar component

ardianhu

1 year ago

1.4k
Landing page

Maxim

1 year ago

2.8k
Update Profile
Update profile page with basic informations

Sedat Kumcu

2 years ago

3.6k
Profile card

Mr Robot

3 years ago

13.4k
Swipe card fully animative
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Sufyan jutt

1 year ago

1.8k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.