Tailwind Cookies Components (187)

Cookies from Saturn

Thin blue horizontal divider line

The image shows only a single thin blue horizontal line across a white background, with no visible content. It appears to be a divider or separator element, but there is insufficient evidence to identify a larger outer component.

<div class="fixed bottom-0 inset-x-0 z-50 overflow-hidden bg-white" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="relative container px-4 mx-auto">
    <img class="absolute bottom-0 right-0 lg:left-0" src="saturn-assets/images/cookies/cookies-big.svg" alt="">
    <div class="relative py-10 max-w-4xl mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="lg:ml-auto xl:ml-0 max-w-md">
            <p class="text-gray-500 mb-3">By clicking "Accept all cookies" you consent to cookies being stored on your device to improve website.</p>
            <a class="inline-flex items-center text-orange-900 hover:text-gray-700 font-semibold" href="#">
              <span class="mr-3">Read Our Data Policy</span>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.92 0.62C12.8185 0.375651 12.6243 0.181475 12.38 0.0799999C12.2598 0.028759 12.1307 0.00157999 12 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1C1 1.26522 1.10536 1.51957 1.29289 1.70711C1.48043 1.89464 1.73478 2 2 2H9.59L1.29 10.29C1.19627 10.383 1.12188 10.4936 1.07111 10.6154C1.02034 10.7373 0.994202 10.868 0.994202 11C0.994202 11.132 1.02034 11.2627 1.07111 11.3846C1.12188 11.5064 1.19627 11.617 1.29 11.71C1.38296 11.8037 1.49356 11.8781 1.61542 11.9289C1.73728 11.9797 1.86799 12.0058 2 12.0058C2.13201 12.0058 2.26272 11.9797 2.38458 11.9289C2.50644 11.8781 2.61704 11.8037 2.71 11.71L11 3.41V11C11 11.2652 11.1054 11.5196 11.2929 11.7071C11.4804 11.8946 11.7348 12 12 12C12.2652 12 12.5196 11.8946 12.7071 11.7071C12.8946 11.5196 13 11.2652 13 11V1C12.9984 0.869323 12.9712 0.740222 12.92 0.62Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex items-center lg:justify-end"><a x-on:click.prevent="open = false" class="inline-block mr-4 py-3 px-5 text-sm font-semibold text-orange-900 border border-gray-200 rounded-md hover:border-orange-900 transition duration-200" href="#">Decline</a><a class="inline-block py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 hover:bg-gray-900 rounded-md transition duration-200" href="#">Accept all cokies</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Cookies from DarkPro

Tailwind CSS

DarkPro

Dark Cookie Policy Consent Banner

A dark-themed cookie consent notice with a heading, explanatory paragraph about cookie use and partner sharing, and two actions labeled Allow and Decline. The bordered card is a compact, single-column notification-style panel.

<div class="fixed bottom-0 inset-x-0 z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
    <div class="container px-4 mx-auto">
        <div class="relative">
            <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-900 to-purple-950 rounded-2xl filter blur-3xl"></div>
            <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
                <div class="p-8 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950 border border-white border-opacity-20 rounded-xl">
                    <h3 class="mb-2 text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Cookie Policy</h3>
                    <p class="mb-8 text-neutral-300 leading-relaxed">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="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                            Allow
                            <svg class="transform ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        <a x-on:click.prevent="open=false" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">Decline</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Cookies from Solstice

Tailwind CSS

Solstice

Cookie consent banner with Accept and Settings buttons

A horizontal, rounded cookie consent notice with explanatory text on the left and two actions on the right: an outlined Cookie Settings button and a filled orange Accept All Cookies button. It is a single contained notification bar with a light background.

<div class="fixed bottom-0 left-0 z-30 w-full p-6" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="container mx-auto px-4">
    <div class="bg-white rounded-5xl border-2 border-gray-100 shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
      <p class="max-w-md">By clicking “Accept All Cookies”, you agree to the storing of cookies on your device.</p>
      <div class="flex gap-4 flex-wrap"><a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Cookie Settings</a><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Accept All Cookies</a></div>
    </div>
  </div>
</div>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Cookies from Nightsable

Tailwind CSS

Nightsable

Dark Cookie Consent Banner with Accept and Login Actions

A dark horizontal banner titled Cookie Consent with explanatory text about cookie use and consent choices, a close icon at top right, a lime primary Accept All Cookies button, and an outlined Log in button. The text block sits on the left while actions are grouped on the right.

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="fixed bottom-0 left-0 z-50 w-full p-4">
  <div class="relative py-8 bg-gray-900 bg-opacity-40 rounded-5xl">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -m-2">
        <div class="w-full md:w-1/2 p-2">
          <h3 class="mb-2.5 text-2xl text-white font-medium tracking-2xl">Cookie Consent</h3>
          <p class="text-sm text-gray-300">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 md:w-1/2 p-2">
          <div class="flex flex-wrap md:justify-end -m-2">
            <div class="w-auto p-2"><a x-on:click.prevent="modal = false" class="inline-block px-8 py-4 font-medium tracking-tighter border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Accept All Cookies</a></div>
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>
          </div>
        </div>
      </div>
    </div>
    <a x-on:click.prevent="modal = false" class="absolute top-7 right-7" href="#">
      <img src="nightsable-assets/images/cookies/close-white.png" alt="">
    </a>
  </div>
</section>

Cookies from Zeus

Tailwind CSS

Zeus

Cookie Policy Consent Banner

A dark navy notification banner displaying a cookie policy heading, explanatory body text about cookie usage, and two action buttons labeled Allow and Decline. The content is stacked vertically and left-aligned within a rounded container.

<div class="fixed bottom-0 inset-x-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto mb-8">
    <div class="p-10 bg-gray-900 rounded-xl">
      <div class="max-w-3xl">
        <h3 class="mb-4 text-2xl font-semibold text-white font-heading">Cookie Policy</h3>
        <p class="mb-8 text-sm text-white opacity-40 leading-loose">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>
        <a x-on:click.prevent="open = false" class="inline-block px-8 py-4 mr-2 text-sm bg-blue-400 hover:bg-blue-500 text-white font-semibold rounded" href="#">Allow</a>
        <a x-on:click.prevent="open = false" class="inline-block px-8 py-4 text-sm bg-transparent text-white font-semibold border border-blue-800 hover:border-blue-700 rounded" href="#">Decline</a>
      </div>
    </div>
  </div>
</div>

Cookies from Zospace

Tailwind CSS

Zospace

Dark Cookie Policy Notification Banner with Accept and More Actions

A dark horizontal banner displaying a cookie policy heading, truncated consent text, a 'More' text link with arrow, and an outlined 'Accept' button. It is a notification-style consent bar arranged in a single horizontal row.

<div class="fixed bottom-0 right-0 z-50 px-4 lg:px-10 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <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 x-on:click.prevent="open = false" 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>

Cookies from Wrexa

Tailwind CSS

Wrexa

Dark Cookie Consent Banner with Accept and Settings Buttons

A dark full-width cookie consent panel with a heading, explanatory paragraph, and two action buttons: a purple filled 'Accept All Cookies' button and an outlined 'Cookies Settings' button. The centered button row sits below left-aligned text.

<div class="fixed left-0 right-0 bottom-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="relative py-12 bg-white">
    <div class="absolute top-0 left-1/2">
      <div class="py-9 bg-gray-900 w-px"></div>
      <div class="py-14 bg-white w-px"></div>
    </div>
  </div>
  <div class="pt-36 pb-24 bg-gray-900">
    <div class="container px-4 mx-auto">
      <h3 class="font-heading text-3xl text-white mb-4">Cookies on this site</h3>
      <p class="text-sm md:ml-24 text-gray-500 mb-16">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. Click Agree and Proceed to accept cookies and go directly to the site or click on More Information to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.</p>
      <div class="text-center"><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-5 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Accept All Cookies</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium border border-white text-white hover:border-gray-200 hover:text-gray-200 rounded" href="#">Cookies Settings</a></div>
    </div>
  </div>
</div>

Cookies from Flex

Tailwind CSS

Flex

Dark Cookie Consent Banner with Decline and Allow Buttons

A full-width dark banner displaying a third-party cookie notice with a policy link on the left and Decline and Allow buttons on the right. The horizontal layout places the message, link, and actions in one row for quick user consent.

<div class="fixed bottom-0 z-50 w-full p-6 md:p-12">
  <div class="p-10 mx-auto w-full bg-coolGray-900 max-w-6xl border border-coolGray-100 rounded-md shadow-md">
    <div class="container mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <p class="mb-4 text-coolGray-400 font-medium">We use third-party cookies in order to personalise your experience</p>
          <a class="flex items-center font-medium text-green-500 hover:text-green-600" href="#">
            <span class="mr-2">Read our cookie policy</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.71 12.71C15.801 12.6149 15.8724 12.5028 15.92 12.38C16.02 12.1365 16.02 11.8635 15.92 11.62C15.8724 11.4972 15.801 11.3851 15.71 11.29L12.71 8.29C12.5217 8.1017 12.2663 7.99591 12 7.99591C11.7337 7.99591 11.4783 8.1017 11.29 8.29C11.1017 8.4783 10.9959 8.7337 10.9959 9C10.9959 9.2663 11.1017 9.5217 11.29 9.71L12.59 11L9 11C8.73479 11 8.48043 11.1054 8.2929 11.2929C8.10536 11.4804 8 11.7348 8 12C8 12.2652 8.10536 12.5196 8.2929 12.7071C8.48043 12.8946 8.73479 13 9 13L12.59 13L11.29 14.29C11.1963 14.383 11.1219 14.4936 11.0711 14.6154C11.0203 14.7373 10.9942 14.868 10.9942 15C10.9942 15.132 11.0203 15.2627 11.0711 15.3846C11.1219 15.5064 11.1963 15.617 11.29 15.71C11.383 15.8037 11.4936 15.8781 11.6154 15.9289C11.7373 15.9797 11.868 16.0058 12 16.0058C12.132 16.0058 12.2627 15.9797 12.3846 15.9289C12.5064 15.8781 12.617 15.8037 12.71 15.71L15.71 12.71ZM22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.7612C13.9996 2.00433 11.9889 1.80629 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92894 4.92893C3.53041 6.32746 2.578 8.10929 2.19215 10.0491C1.8063 11.9889 2.00433 13.9996 2.76121 15.8268C3.51809 17.6541 4.79981 19.2159 6.4443 20.3147C8.08879 21.4135 10.0222 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C19.9997 18.1425 20.7363 17.0401 21.2388 15.8268C21.7413 14.6136 22 13.3132 22 12ZM4 12C4 10.4177 4.4692 8.87103 5.34825 7.55544C6.2273 6.23985 7.47673 5.21446 8.93854 4.60896C10.4003 4.00346 12.0089 3.84504 13.5607 4.15372C15.1126 4.4624 16.538 5.22433 17.6569 6.34315C18.7757 7.46197 19.5376 8.88743 19.8463 10.4393C20.155 11.9911 19.9965 13.5997 19.391 15.0615C18.7855 16.5233 17.7602 17.7727 16.4446 18.6518C15.129 19.5308 13.5823 20 12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84286 16.1566 4 14.1217 4 12Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="flex flex-wrap justify-end">
            <div class="w-full md:w-auto py-1 md:py-0 md:mr-4"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-coolGray-600 hover:bg-coolGray-700 font-medium text-center focus:ring-2 focus:ring-coolGray-600 focus:ring-opacity-50 border border-coolGray-800 rounded-md shadow-sm" href="#">Decline</a></div>
            <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-3 px-5 w-full leading-5 text-white bg-green-500 hover:bg-green-600 font-medium text-center focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-transparent rounded-md shadow-sm" href="#">Allow</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Cookies from Uinel

Tailwind CSS

Uinel

Dark Cookie Consent Notification Card

A dark navy cookie consent card with a small COOKIES label, a 'Your choice' heading, explanatory text, a 'Manage cookies' text link, and a blue 'Accept all' button with a close icon in the top corner. It functions as a compact notification prompting the user to accept or manage cookie preferences.

<div class="fixed bottom-0 right-0 z-50 p-6" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="relative p-8 md:p-10 xl:px-16 xl:pb-12 xl:pt-14 sm:mr-8 w-full max-w-xl bg-darkBlueGray-500 rounded-3xl">
    <a x-on:click.prevent="open = false" class="absolute right-7 top-7" href="#">
      <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="13.495" y1="0.494975" x2="1.49498" y2="12.495" stroke="#326BFF" stroke-width="1.4"></line><line x1="12.505" y1="12.495" x2="0.505026" y2="0.494976" stroke="#326BFF" stroke-width="1.4"></line></svg>
    </a>
    <h3 class="mb-3 text-xs text-gray-300 font-heading font-medium uppercase tracking-widest">Cookies</h3>
    <h2 class="mb-6 text-3xl text-white font-heading font-medium">Your choice</h2>
    <p class="mb-9 text-gray-300 max-w-sm">By clicking “Accept”, you agree to the storing of cookies on your device to enhance (...)</p>
    <div class="sm:flex sm:items-center">
      <div class="text-center"><a class="inline-block mb-6 sm:mb-0 text-xl text-blue-500 hover:text-blue-600 font-bold tracking-tight" href="#">Manage cookies</a></div>
      <div class="sm:ml-16 sm:max-w-max"><a class="block py-4 px-10 w-full text-lg leading-5 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Accept all</a></div>
    </div>
  </div>
</div>

Cookies from Yofte

Tailwind CSS

Yofte

Cookie consent banner with Accept action

A horizontal cookie consent notice on a white background with a bold heading, explanatory body text, a 'More' text link with arrow, and a prominent orange ACCEPT button. It informs users about cookie storage and offers a single consent action.

<div class="fixed bottom-0 right-0 z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="relative flex flex-wrap items-end pl-12 pr-8 py-6 bg-white">
    <div class="absolute top-0 -mt-2 w-6 h-6 bg-white transform rotate-45"></div>
    <div class="max-w-md pr-2">
      <h5 class="mb-2 text-xl font-bold font-heading">Cookies settings</h5>
      <p class="text-gray-500">By clicking Accept, you agree to the storing of cookies on your device to enhance site navigation...</p>
    </div>
    <div class="mt-6 md:mt-0">
      <a class="inline-flex mr-6 items-center text-blue-500 underline" href="#">
        <span class="mr-2">More</span>
        <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M26.0871 7.41489L19.3999 14.102L18.564 13.2661L24.2439 7.58625L0.592385 7.59043L0.592385 6.41183L24.2439 6.40765L18.982 1.14571L19.8179 0.309822L26.0871 6.579C26.3179 6.80984 26.3179 7.18406 26.0871 7.41489Z" fill="#3C60D9"></path>
        </svg>
      </a>
      <a x-on:click.prevent="open=false" class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Accept</a>
    </div>
  </div>
</div>

Cookies from Nigodo

Tailwind CSS

Nigodo

Cookie consent banner with Decline and Allow buttons

A light, bordered notice asking users to accept third-party cookies for personalisation, with a policy link and two actions, Decline and Allow. The content is arranged horizontally with the message on the left and the buttons on the right.

<div class="fixed left-0 bottom-0 w-full z-50 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-12 px-6 md:px-14 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="max-w-xl">
            <p class="text-xl font-bold leading-8 mb-6">We use third-party cookies in order to personalise your experience</p>
            <a class="inline-flex items-center text-xl leading-7 text-gray-500 hover:underline" href="#">
              <span class="mr-2">Read our cookie policy</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.82994 5.29001L2.58994 1.05001C2.49698 0.956281 2.38638 0.881887 2.26452 0.831118C2.14266 0.780349 2.01195 0.754211 1.87994 0.754211C1.74793 0.754211 1.61723 0.780349 1.49537 0.831118C1.37351 0.881887 1.26291 0.956281 1.16994 1.05001C0.983692 1.23737 0.87915 1.49082 0.87915 1.75501C0.87915 2.0192 0.983692 2.27265 1.16994 2.46001L4.70994 6.00001L1.16994 9.54001C0.983692 9.72737 0.87915 9.98082 0.87915 10.245C0.87915 10.5092 0.983692 10.7626 1.16994 10.95C1.26338 11.0427 1.3742 11.116 1.49604 11.1658C1.61787 11.2155 1.74834 11.2408 1.87994 11.24C2.01155 11.2408 2.14201 11.2155 2.26385 11.1658C2.38569 11.116 2.4965 11.0427 2.58994 10.95L6.82994 6.71001C6.92367 6.61705 6.99806 6.50645 7.04883 6.38459C7.0996 6.26273 7.12574 6.13202 7.12574 6.00001C7.12574 5.868 7.0996 5.73729 7.04883 5.61543C6.99806 5.49357 6.92367 5.38297 6.82994 5.29001Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg hover:text-white hover:bg-indigo-800 font-extrabold bg-white border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Decline</a><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Allow</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Cookies from Atis

Tailwind CSS

Atis

Dark Cookie Policy Consent Banner with Allow and Decline Buttons

A full-width dark banner displaying a cookie policy heading, explanatory paragraph text, and two action buttons on the right: a filled purple Allow button and an outlined Decline button. It is a horizontal notice for collecting cookie consent.

<div class="fixed top-0 inset-x-0 z-50" x-data="{ open: true }" x-show="open">
  <div class="py-6 bg-gray-800 text-white">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-3/4 px-4">
          <p class="font-bold font-heading">Cookie Policy</p>
          <p class="mt-3 mb-6 text-gray-400 text-sm">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>
        <div class="w-full lg:w-1/4 px-4 lg:text-right">
            <a class="inline-block mr-4 py-2 px-4 rounded-l-xl rounded-t-xl border-2 border-purple-600 hover:border-purple-700 bg-purple-600 hover:bg-purple-700 transition duration-200" href="#" x-on:click.prevent="open=false">Allow</a>
            <a class="inline-block py-2 px-4 rounded-r-xl rounded-t-xl border-2 border-gray-400 hover:bg-gray-700 transition duration-200" href="#" x-on:click.prevent="open=false">Decline</a></div>
      </div>
    </div>
  </div>
</div>

Cookies from Pstls.

Tailwind CSS

Pstls.

Cookies settings banner with Accept and Show more actions

A white cookie consent panel with a serif heading, explanatory body text, a solid black Accept button, and a gray Show more link arranged side by side. It is a compact notification-style component for managing cookie consent.

<section class="fixed bottom-0 left-0 max-w-3xl p-4 md:p-8 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-white shadow-lg">
      <div class="p-4 md:p-10 border border-gray-100">
        <div class="flex flex-wrap -mx-4 items-center">
          <div class="w-full md:w-4/6 px-4 mb-6 md:mb-0">
            <h3 class="text-3xl md:text-4xl font-heading mb-2" >Cookies settings</h3>
            <p class="leading-8" >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-2/6 px-4"><a x-on:click.prevent="open=false" class="block w-full py-3 px-6 mb-2 text-center text-white font-bold bg-black hover:bg-gray-900 transform duration-200" href="#" >Accept</a><a class="block w-full py-3 px-6 text-center text-gray-400 hover:text-gray-500 font-semibold bg-transparent" href="#" >Show more</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

Cookies from BoldUI

Tailwind CSS

BoldUI

Dark Cookie Policy Consent Banner with Accept and Allow Actions

A full-width dark banner displaying a cookie policy heading, explanatory paragraph text, and two consent actions: a yellow filled Accept pill button and a text-style Allow link with an arrow. The layout is a left-aligned vertical stack within a black container.

<div class="fixed bottom-0 left-0 right-0 pb-8 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-10 px-8 md:px-16 bg-black border">
      <h3 class="mb-4 text-lg text-white font-heading">Cookie Policy</h3>
      <p class="mb-6 text-sm text-gray-500">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-wrap items-center justify-center md:justify-start">
        <a x-on:click.prevent="open=false" class="inline-flex w-full md:w-auto mb-4 md:mb-0 md:mr-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
          <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
          </svg>
          <span class="text-sm font-heading">Accept</span>
        </a>
        <a x-on:click.prevent="open=false" class="inline-flex items-center text-white hover:underline" href="#">
          <span class="mr-2 text-sm font-heading">Allow</span>
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Cookies from Acros

Tailwind CSS

Acros

Cookie Policy Consent Banner

A dark horizontal banner with a cookie icon, a Cookie Policy heading, and explanatory text about cookie use, with Accept (filled teal) and Decline (outlined) buttons on the right. It is a full-width notification-style consent bar placed as a single row.

<div class="fixed z-50 bottom-0 w-full p-6" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto">
    <div class="px-8 py-6 mx-auto w-full bg-gray-900 rounded-md">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-auto px-4 mb-4 lg:mb-0">
          <img src="acros-assets/icons/cookies/cookie.svg" alt="">
        </div>
        <div class="w-full lg:w-3/5 px-4 mr-auto mb-8 lg:mb-0">
          <div class="max-w-2xl">
            <h4 class="font-heading text-white text-lg font-medium mb-2">Cookie Policy</h4>
            <p class="text-sm leading-6 text-white">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.</p>
          </div>
        </div>
        <div class="w-full lg:w-auto px-4">
          <div class="sm:flex items-center"><a x-on:click.prevent="open = false" class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Accept</a><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Decline</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Cookies from Bendis

Tailwind CSS

Bendis

Thin blue horizontal divider line

The image shows only a thin horizontal blue line spanning the full width on a white background, likely a divider or border element. No broader component content is visible to classify further.

<div class="fixed bottom-0 inset-x-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto mb-8">
    <div class="py-10 px-16 bg-blue-900">
      <h3 class="mb-2 text-2xl font-bold text-white">Cookie Policy</h3>
      <p class="mb-4 text-sm text-blue-200 leading-loose">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>
      <a x-on:click.prevent="open=false" class="inline-block px-8 py-5 mr-2 text-sm uppercase bg-yellow-500 hover:bg-yellow-400 text-blue-900 font-bold border-2 border-transparent" href="#">Accept</a>
      <a x-on:click.prevent="open=false" class="inline-block px-8 py-5 text-sm uppercase leading-normal bg-transparent text-white font-bold border-2 border-white hover:text-blue-100" href="#">Decline</a>
    </div>
  </div>
</div>

Cookies from Metis

Tailwind CSS

Metis

Dark Cookie Policy Consent Banner with Accept and Refuse Buttons

A dark rounded banner titled Cookie Policy with a paragraph explaining cookie usage and two action buttons, Accept Cookies (filled blue) and Refuse Cookies (outlined). It functions as a notification-style consent prompt displayed as a contained card.

<div class="fixed bottom-0 inset-x-0 px-4 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto pt-4 px-6 pb-6 mb-8 bg-blueGray-800 text-white rounded">
    <p class="font-bold font-heading">Cookie Policy</p>
    <p class="mt-3 mb-6 text-blueGray-200 text-sm">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>
    <a x-on:click.prevent="open=false" class="inline-block py-3 px-6 mr-2 text-xs leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Accept Cookies</a><a x-on:click.prevent="open=false" class="inline-block py-3 px-6 text-xs leading-none border border-blue-500 hover:border-blue-400 hover:text-blueGray-200 rounded" href="#">Refuse Cookies</a>
  </div>
</div>

Cookies from Shuffle UX

Tailwind CSS

Shuffle UX

Cookie Policy Consent Banner

A slate-gray cookie consent banner with a bold heading, multi-line policy text, and two buttons labeled Allow and Decline. It presents a consent choice for cookie usage and is laid out as a stacked, left-aligned content block.

<div class="fixed top-0 inset-x-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto mt-8">
    <div class="p-8 bg-gray-500 rounded-lg">
      <h3 class="mb-2 text-2xl font-bold text-white">Cookie Policy</h3>
      <p class="mb-4 text-sm text-gray-50 leading-loose">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>
      <a x-on:click.prevent="open=false" class="inline-block px-6 py-2 mr-4 text-sm leading-loose bg-gray-50 hover:bg-gray-100 text-gray-500 font-semibold rounded" href="#">Allow</a><a x-on:click.prevent="open=false" class="inline-block px-6 py-2 text-sm leading-loose bg-transparent text-gray-50 font-semibold border hover:border-gray-50 rounded" href="#">Decline</a>
    </div>
  </div>
</div>

Cookies from Cronos

Tailwind CSS

Cronos

Cookie Policy Consent Banner with Allow and Decline Buttons

A dark green full-width notice panel with a yellow heading, explanatory cookie policy text, and two buttons for allowing or declining cookies. It is a notification-style consent component placed as a contained block on a white page.

<div class="pb-6 fixed bottom-0 left-0 right-0 z-50" :class="{ 'hidden': !open }" x-data="{ open: true }">
    <div class="container mx-auto px-4 mb-8">
        <div class="p-8 md:p-12 bg-green-500">
            <h6 class="text-yellow-500 text-xl font-bold mb-4">Cookie Policy</h6>
            <p class="text-green-100 mb-6">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-wrap gap-4">
                <a x-on:click.prevent="open = false" class="px-6 py-3 block text-center w-full sm:w-auto bg-yellow-500 text-sm font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" href="#">Allow</a>
                <a x-on:click.prevent="open = false" class="px-6 py-3 block text-center w-full sm:w-auto bg-green-600 text-white text-sm font-bold hover:bg-green-700 focus:ring focus:ring-green-400 transition duration-200" href="#">Decline</a>
            </div>
        </div>
    </div>
</div>

Cookies from Casper

Tailwind CSS

Casper

Cookie Consent Banner with Gradient Background

A rounded cookie consent notice on a multicolor gradient panel with a heading, explanatory text, a Decline outlined button, a purple Accept all cookies button, and a close icon in the top-right corner. It asks the user to consent to cookie storage on the site.

<div class="fixed bottom-0 left-0 p-6 md:p-10 z-50">
  <div class="relative p-8 md:p-12 max-w-xl rounded-3xl overflow-hidden">
    <img class="absolute top-0 left-0 w-full h-full" src="casper-assets/cookies/small-bg-gradient.png" alt="">
    <button class="absolute top-0 right-0 m-4 inline-block">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.4099 12L19.7099 5.71C19.8982 5.5217 20.004 5.2663 20.004 5C20.004 4.7337 19.8982 4.47831 19.7099 4.29C19.5216 4.1017 19.2662 3.99591 18.9999 3.99591C18.7336 3.99591 18.4782 4.1017 18.2899 4.29L11.9999 10.59L5.70994 4.29C5.52164 4.1017 5.26624 3.99591 4.99994 3.99591C4.73364 3.99591 4.47824 4.1017 4.28994 4.29C4.10164 4.47831 3.99585 4.7337 3.99585 5C3.99585 5.2663 4.10164 5.5217 4.28994 5.71L10.5899 12L4.28994 18.29C4.19621 18.383 4.12182 18.4936 4.07105 18.6154C4.02028 18.7373 3.99414 18.868 3.99414 19C3.99414 19.132 4.02028 19.2627 4.07105 19.3846C4.12182 19.5064 4.19621 19.617 4.28994 19.71C4.3829 19.8037 4.4935 19.8781 4.61536 19.9289C4.73722 19.9797 4.86793 20.0058 4.99994 20.0058C5.13195 20.0058 5.26266 19.9797 5.38452 19.9289C5.50638 19.8781 5.61698 19.8037 5.70994 19.71L11.9999 13.41L18.2899 19.71C18.3829 19.8037 18.4935 19.8781 18.6154 19.9289C18.7372 19.9797 18.8679 20.0058 18.9999 20.0058C19.132 20.0058 19.2627 19.9797 19.3845 19.9289C19.5064 19.8781 19.617 19.8037 19.7099 19.71C19.8037 19.617 19.8781 19.5064 19.9288 19.3846C19.9796 19.2627 20.0057 19.132 20.0057 19C20.0057 18.868 19.9796 18.7373 19.9288 18.6154C19.8781 18.4936 19.8037 18.383 19.7099 18.29L13.4099 12Z" fill="#FFAF9B"></path>
      </svg>
    </button>
    <div class="relative">
      <h4 class="text-2xl font-medium text-black mb-4">Cookies on this site</h4>
      <p class="tracking-tight text-black mb-7">By clicking "Accept all cookies" you consent to cookies being stored on your device to improve website.</p>
      <div class="flex flex-col xs:flex-row sm:items-center"><a class="inline-flex items-center justify-center h-11 mb-4 xs:mb-0 xs:mr-4 py-3 px-4 text-sm font-medium text-violet-900 border-2 border-gray-300 hover:border-violet-600 rounded-full transition duration-100" href="#">Decline</a><a class="inline-flex items-center justify-center h-11 py-3 px-5 text-sm font-medium text-black hover:text-violet-800 bg-violet-600 hover:bg-white rounded-full transition duration-200" href="#">Accept all cookies</a></div>
    </div>
  </div>
</div>

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 Saturn

Thin blue horizontal divider line

Cookies from DarkPro

Dark Cookie Policy Consent Banner

Cookies from Solstice

Cookie consent banner with Accept and Settings buttons

Your next website starts here

Cookies from Nightsable

Dark Cookie Consent Banner with Accept and Login Actions

Cookies from Zeus

Cookie Policy Consent Banner

Cookies from Zospace

Dark Cookie Policy Notification Banner with Accept and More Actions

Cookies from Wrexa

Dark Cookie Consent Banner with Accept and Settings Buttons

Cookies from Flex

Dark Cookie Consent Banner with Decline and Allow Buttons

Cookies from Uinel

Dark Cookie Consent Notification Card

Cookies from Yofte

Cookie consent banner with Accept action

Cookies from Nigodo

Cookie consent banner with Decline and Allow buttons

Cookies from Atis

Dark Cookie Policy Consent Banner with Allow and Decline Buttons

Cookies from Pstls.

Cookies settings banner with Accept and Show more actions

Cookies from BoldUI

Dark Cookie Policy Consent Banner with Accept and Allow Actions

Cookies from Acros

Cookie Policy Consent Banner

Cookies from Bendis

Thin blue horizontal divider line

Cookies from Metis

Dark Cookie Policy Consent Banner with Accept and Refuse Buttons

Cookies from Shuffle UX

Cookie Policy Consent Banner

Cookies from Cronos

Cookie Policy Consent Banner with Allow and Decline Buttons

Cookies from Casper

Cookie Consent Banner with Gradient Background

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support