In this section, we'll design a cookie consent UI using Tailwind CSS. We'll create a Simple Banner, Modal Dialog, and Notification Bar for cookie consent.
Simple Banner Cookie Consent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Simple Banner Cookie Consent</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="fixed bottom-0 left-0 w-full bg-gray-900 text-white p-4">
<p class="text-sm">
We use cookies to ensure you get the best experience on our website. By
continuing, you agree to our
<a href="#" class="underline">cookie policy</a>.
</p>
<button class="mt-2 px-4 py-1.5 bg-purple-500 text-white rounded hover:bg-purple-600">
Accept
</button>
</div>
</body>
</html>
Banner Cookie Consent ui
Modal Dialog Cookie Consent
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-8 max-w-md">
<p class="mb-4">We use cookies to ensure you get the best experience on our website. By continuing, you agree to our
<a href="#" class="underline">cookie policy</a>.</p>
<div class="flex justify-end">
<button class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600">Accept</button>
</div>
</div>
</div>
tailwind Modal Dialog Cookie
Cookie Consent Notification Bar design Accept and Decline Button
<div class="bg-gray-100">
<div class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-200 shadow">
<div class="container mx-auto px-4 py-2 flex justify-between items-center">
<p class="text-sm text-gray-700">We use cookies to ensure you get the best experience on our website.
Learn more <a href="#" class="text-blue-500">here</a>.</p>
<div class="flex space-x-4">
<button
class="px-4 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-300 ease-in-out">Accept</button>
<button
class="px-4 py-1.5 bg-gray-300 text-gray-700 rounded hover:bg-gray-400 transition duration-300 ease-in-out">Decline</button>
</div>
</div>
</div>
</div>
Accept and Decline Cookie Consent
Tailwind CSS Cookie Consent with Accept and Decline and Setting Option Button
<div class="bg-gray-100">
<div class="fixed bottom-10 left-1/2 transform -translate-x-1/2 w-full max-w-lg bg-white p-6 rounded-lg shadow-lg">
<p class="text-gray-800 mb-4">
This website uses cookies to ensure you get the best experience on our
website.
</p>
<div class="flex justify-center space-x-4">
<button
class="px-4 py-1.5 rounded-lg bg-green-500 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
Accept
</button>
<button
class="px-4 py-1.5 rounded-lg bg-red-500 text-white hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
Decline
</button>
<button
class="px-4 py-1.5 rounded-lg bg-yellow-500 text-white hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
Settings
</button>
</div>
</div>
</div>
tailwind css 3 button Cookie Consent
