In this section, we’ll design a cookie consent UI using Tailwind CSS. We’ll create a simple banner, a modal dialog, and a notification bar for cookie consent.
Simple Banner Cookie Consent
<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>
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>
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>
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>
