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 2.9k 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

grid card

Md. Tofayel islam

1 year ago

2.6k
content section

Crimson

1 year ago

1.6k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Rajesh Pandey

1 year ago

1.8k
Shop Now Amazon x
Product cards

ORGIN_DREAMS

1 year ago

1.8k
3d card
the Best 3D card with tailwind css

irahoza daniel

1 year ago

1.5k
Sign up form

Rajesh Maheshwari

1 year ago

1.6k
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

KULDEEP

1 year ago

1.1k
Hover effect card

Rakib Hasan Sohag

1 year ago

2.2k
Responsive Cards
Responsive Cards

Chanuka Rukshan

7 months ago

709
Contact us Form with Responsive

KULDEEP

1 year ago

1.1k
Responsive Features Section

ariaw

1 year ago

1.7k
Call to Action Box

Aitrik Saha

1 year ago

2.1k

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.