Tailwind Cookies Components (187)

Framework

UI Library

Components

Cookies from Mirga

Tailwind CSS

Mirga

<div class="fixed bottom-0 w-full z-50 p-5" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="container mx-auto px-4">
    <div class="max-w-5xl mx-auto">
      <div class="bg-white rounded-lg p-8 lg:px-14">
        <h6 class="font-heading text-3xl font-semibold mb-2 tracking-tight">
          <span>We care about</span>
          <span class="bg-orange-50 rounded-lg px-1 mx-1 inline-block">your privacy</span>
        </h6>
        <p class="text-neutral-600 font-semibold mb-6 tracking-tight">We use cookies and similar technologies to provide the best experience on our website. Learn more.</p>
        <div class="flex flex-wrap -m-2">
          <div class="w-full md:w-1/2 p-2"><a x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center w-full h-10 p-5 font-semibold tracking-tight text-sm hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Ok</a></div>
          <div class="w-full md:w-1/2 p-2"><a x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center w-full h-10 p-5 font-semibold tracking-tight text-sm hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">No, thanks</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Cookie Consent Banner with Ok and No Thanks Buttons

A bottom-anchored white card on a peach background asking visitors to accept cookies, with a highlighted 'your privacy' heading, a short explanatory sentence, and two outlined buttons for accepting or declining.

Cookies from Flow

Tailwind CSS

Flow

<div x-data="{ modal: true }" :class="{'hidden': !modal}" class="fixed z-50 bottom-0 w-full p-6 md:p-16">
    <div class="container mx-auto px-4">
        <div class="py-6 px-10 mx-auto w-full bg-white border rounded-2xl">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
                    <h5 class="text-lg font-medium">Privacy Settings</h5>
                    <p class="text-gray-700">This site uses third-party website tracking technologies to provide and continually improve our services.</p>
                </div>
                <div class="w-full md:w-1/2 px-4">
                    <div class="flex flex-wrap md:justify-end -mb-3">
                        <div class="w-auto mb-3 mr-4">
                            <a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Deny</a>
                        </div>
                        <div class="w-auto mb-3">
                            <a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Accept All</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Cookie Privacy Consent Banner with Deny and Accept All Buttons

A horizontal privacy settings notice with a bordered rounded container showing a heading, explanatory text about third-party tracking, and two pill-shaped actions for denying or accepting all tracking. It is a compact, light-themed notification bar placed as a single row.

Cookies from Cyber

Tailwind CSS

Cyber

<div class="fixed bottom-0 inset-x-0 z-50 scan-lines" x-data="{ open: true }" :class="{ 'hidden': !open }">
        <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black opacity-95"></div>
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-10 left-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse"></div>
            <div class="absolute top-20 right-1/3 w-2 h-2 bg-green-400 rounded-full animate-pulse delay-75"></div>
            <div class="absolute bottom-10 left-1/3 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-150"></div>
            <div class="absolute bottom-20 right-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse delay-300"></div>
        </div>
        
        <div class="container px-4 mx-auto mt-8 relative z-10">
            <div class="relative p-8 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-950 border-2 border-blue-400 border-opacity-30 animate-float" style="clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-5"></div>
                <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
                
                <div class="relative z-10">
                    <h3 class="mb-2 text-2xl font-bold font-heading tracking-wider animate-glitch bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">COOKIE PROTOCOL</h3>
                    <p class="mb-8 text-gray-400 leading-loose text-sm lg:text-base">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the 'how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
                    
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a x-on:click.prevent="open=false" class="group relative px-6 py-3 text-sm text-center bg-gradient-to-r from-green-400 to-blue-400 hover:from-blue-400 hover:to-green-400 text-gray-950 font-semibold tracking-wider transition-all duration-300 transform hover:scale-105 hover:animate-pulse-neon overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
                            <span class="relative z-10">ALLOW ACCESS</span>
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
                        </a>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Cookie Protocol Consent Banner

A dark, full-width cookie consent banner with a cyan-gradient heading, monospace body text describing cookie usage, and two actions: a green-to-cyan gradient 'Allow Access' button and an outlined purple 'Deny Protocol' button. The panel uses angled corners and a neon, cyberpunk-styled border.

Cookies from FilyTreck

Tailwind CSS

FilyTreck

<div :class="{'hidden': !open}" class="fixed bottom-0 left-0 z-40 w-full p-6" x-data="{ open: true }">
    <div class="max-w-5xl mx-auto bg-white border border-gray-100 overflow-hidden rounded-3xl">
        <div class="py-14 px-8 md:px-14">
            <h2 class="mb-6 font-heading text-2xl font-bold">We use third-party cookies to personalize content, ads, and analyze site traffic.</h2>
            <p class="text-lg font-light text-gray-500">Vestibulum sit amet nisi volutpat, sagittis metus et, posuere magna. Sed venenatis metus turpis, eget malesuada nulla posuere facilisis consequat ac volutpat a, ultrices.</p>
        </div>
        <div class="py-6 px-8 md:px-14 bg-gray-50">
            <div class="flex flex-wrap gap-2">
                <a href="#" x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Allow cookies</a>
                <a href="#" x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200">Decline</a>
            </div>
        </div>
    </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Cookie Consent Banner with Allow and Decline Buttons

A contained cookie consent card with a bold heading, gray supporting paragraph, and a footer row containing a filled blue Allow cookies button and an outlined Decline button. The layout is a single centered stacked card with a light gray action footer.

Cookies from Aurora

Tailwind CSS

Aurora

<div x-data="{ modal: true }" x-show="modal" class="fixed z-50 top-0 w-full py-8">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-teal-800 rounded-xl border-2 border-teal-700 shadow">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 xl:w-8/12 px-4 mb-8 lg:mb-0">
          <p class="text-gray-200">By clicking “Accept All Cookies”, you agree to the storing of cookies on your device.</p>
        </div>
        <div class="w-full lg:w-1/2 xl:w-4/12 px-4">
          <div class="xs:flex items-center justify-end">
            <a class="flex xs:inline-flex mb-3 xs:mb-0 xs:mr-4 items-center justify-center h-12 px-5 text-center text-base text-white hover:text-yellowGreen-700 font-semibold rounded-lg transition duration-200" href="#">Cookies Settings</a>
            <a x-on:click.prevent="modal = false" class="relative inline-flex items-center justify-center h-12 px-5 text-center text-base text-teal-800 font-bold bg-white hover:bg-yellowGreen-600 rounded-lg transition duration-300" href="#">
              <span>Accept All Cookies</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Dark green cookie consent banner with settings and accept actions

A horizontal cookie consent notification bar with a dark green background, explanatory text on the left, a text link for cookie settings, and a white Accept All Cookies button on the right. It functions as a notification-style banner spanning the width of its container.

Cookies from asitrastudio

Tailwind CSS

asitrastudio

<div class="fixed bottom-0 right-0 w-full bg-white z-50" x-data="{ open: true }" x-show="open">
  <div class="relative pt-8 pb-9">
    <button class="absolute top-0 right-0 mt-4 mr-6 p-0 text-xl" x-on:click="open = false">
      <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="black" stroke-width="1"></path>
      </svg>
    </button>
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-8/12 px-4 mb-8 lg:mb-0">
          <h4 class="font-medium text-2xl tracking-tight mb-4">Cookie Consent</h4>
          <p class="text-coolGray-500 text-sm leading-snug mb-5">In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar technologies for technical purposes and, with your consent, for “basic interactions &amp; functionalities”, “experience enhancement”, “measurement” and “targeting &amp; advertising”. Denying consent may make related features unavailable. You can freely give, deny, or withdraw your consent at any time.Use the “I accept” button to consent to the use of such technologies.</p>
        </div>
        <div class="w-full lg:w-4/12 px-4 sm:flex items-center lg:justify-end">
          <a x-on:click.prevent="open = false" class="inline-block w-full sm:w-auto text-center mb-3 sm:mb-0 sm:mr-4 py-4 px-8 font-medium text-white leading-none bg-black hover:bg-blue-500 border-1.5 border-black hover:border-blue-500 rounded-full transition duration-150" href="#">I accept</a>
          <a class="inline-block w-full sm:w-auto text-center py-4 px-8 font-medium text-black hover:text-white leading-none bg-white hover:bg-black border-1.5 border-black rounded-full transition duration-150" href="#">Settings</a>
        </div>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Cookie Consent Banner with Accept and Settings Buttons

A light-background cookie consent notice with a bold heading, explanatory body text, a close icon, and two action buttons: a filled black "I accept" button and an outlined "Settings" button. It appears as a horizontal banner that asks users to consent to cookies and related technologies.

Cookies from Consulty

Tailwind CSS

Consulty

<div class="fixed bottom-0 left-0 z-40 w-full p-6" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="container mx-auto px-4">
        <div class="bg-black rounded-2xl p-6 relative overflow-hidden flex items-center justify-between gap-4 flex-wrap">
            <p class="trakcing-tight text-white">
                <span>We use cookies to enhance your browser experience. By using this website you agree to our</span>
                <span class="underline">Cookie Policy.</span>
            </p>
            <a href="#" x-on:click.prevent="open = false">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M6 18L18 6M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
            <div class="absolute bottom-0 left-0 right-0">
                <div class="bg-orange-400 w-full h-1"></div>
            </div>
            <div class="absolute top-1/2 right-28 transform -translate-y-1/2 h-full">
                <img class="h-full" src="consulty-assets/cookies/shapes1.svg" alt="">
            </div>
        </div>
    </div>
</div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Dark Cookie Consent Banner with Orange Accent

A black, rounded notification bar fixed near the bottom of a light gray page, displaying a cookie usage message with an underlined Cookie Policy link and a dismiss close icon. A thin orange bottom border and a faint decorative graphic on the right add visual accent.

Cookies from Suncealand

Tailwind CSS

Suncealand

<div class="fixed bottom-0 inset-x-0 z-50 p-4" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="pt-14 pb-20 px-8 md:px-18 bg-yellowGray-500 rounded-3xl">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-2/3 px-4">
        <div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-8">
          <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
          <span class="uppercase text-sm font-medium tracking-tight">COOOOKIES</span>
        </div>
        <h1 class="text-4xl font-heading mb-8">Cookies on this site</h1>
        <p class="max-w-4xl">By clicking accept, you agree to the storing of cookies on your device to enhance site navigation. Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests.</p>
      </div>
      <div class="w-full xl:w-1/3 px-4 pt-16">
        <div class="flex flex-wrap items-center -mb-4">
          <a x-on:click.prevent="open = false" class="group relative inline-block h-16 sm:mr-6 mb-4 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-blueGray-900 rounded">
                <span class="text-base font-semibold uppercase">Allow</span>
              </div>
            </div>
          </a>
          <a class="group relative inline-block h-16 mb-4 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-white border-2 border-blueGray-900 rounded">
                <span class="text-base font-semibold uppercase">More</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Cookie consent banner with Allow and More actions

A horizontal cookie consent notice on a cream background with a pill label, serif heading, explanatory paragraph, and two buttons: a filled blue Allow button and an outlined More button. It asks visitors to agree to cookie storage before continuing.

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.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Cookies Components

Framework

UI Library

Components

Cookies from Mirga

Get the code for 13,400+ components

Cookie Consent Banner with Ok and No Thanks Buttons

Cookie Consent Banner with Accept and Decline Buttons

Cookies from Flow

Get the code for 13,400+ components

Cookie Privacy Consent Banner with Deny and Accept All Buttons

Dark Green Privacy Settings Cookie Consent Banner

Cookies from Cyber

Get the code for 13,400+ components

Cookie Protocol Consent Banner

Cookie Protocol Detected Consent Banner

Cookies from FilyTreck

Get the code for 13,400+ components

Cookie Consent Banner with Allow and Decline Buttons

Cookie Consent Card with Allow and Decline Buttons

Cookies from Aurora

Get the code for 13,400+ components

Dark green cookie consent banner with settings and accept actions

Dark Cookie Consent Banner with Settings and Accept Buttons

Cookies from asitrastudio

Get the code for 13,400+ components

Cookie Consent Banner with Accept and Settings Buttons

Cookie Consent Banner with Accept and Decline Buttons

Cookies from Consulty

Get the code for 13,400+ components

Dark Cookie Consent Banner with Orange Accent

Cookie Consent Banner with Decline and Allow Buttons

Cookies from Suncealand

Get the code for 13,400+ components

Cookie consent banner with Allow and More actions

Dark cookie consent banner with Allow and More actions

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

From one prompt to production‑ready code

Products

Extensions

UI Components

Company

Support