Cookie consent sticky bottom banner

This tailwind example is contributed by Santiago Hernandez, on 26-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Cookie consent

Author Santiago Hernandez

Tailwind v3.4 3.2k 7

Fork Fullscreen

<div class="fixed bottom-0 right-0 flex items-center justify-center py-4 z-50 mx-4">
  <div class="container">
    <div class="flex flex-wrap items-center justify-between rounded-lg border bg-white dark:bg-gray-800 p-4">
      <div class="w-full md:w-7/12 lg:w-2/3 flex items-center px-2">
        <span class="text-indigo-500 mr-4">
          <svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="30" width="30" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
          </svg>
        </span>
        <div class="mb-6 md:mb-0">
          <h3 class="text-lg font-bold text-black dark:text-white">We use cookies</h3>
          <p class="text-sm font-medium text-body-color dark:text-gray-300">Please accept our cookies so we can provide the best experience.</p>
        </div>
      </div>
      <div class="w-full md:w-5/12 lg:w-1/3">
        <div class="flex items-center space-x-3 md:justify-end">
          <button class="button bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 active:bg-gray-100 dark:active:bg-gray-500 dark:active:border-gray-500 text-gray-600 dark:text-gray-100 radius-round h-11 px-8 py-2">Decline</button>
          <button class="button bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white radius-round h-11 px-8 py-2">Accept</button>
        </div>
      </div>
    </div>
  </div>
</div>