Snackbar Privacy Policy - Tailwind Component
This a responsive snackbar privacy policy made with Tailwind CSS.
alert
Loading component...
79 lines
<section class="items-center justify-center min-h-screen min-w-full">
<div class="items-center pt-24 space-y-8 mx-4 mb-12">
<div
class="max-w-5xl sm:mx-auto flex flex-row items-center bg-gray-900 p-4 md:p-3 leading-none font-medium rounded-3xl shadow-2xl shadow-green-700">
<div class="flex flex-col md:flex-row justify-between items-center text-gray-300">
<div class="flex-initial inline-flex w-full md:w-8/12 items-center text-justify text-sm pr-4">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2 text-green-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
</span>
Notice: Rookie uses cookies to provide necessary website functionality and improve your experience. By using
our website, you agree to our Privacy Policy and our Cookies Policy.
</div>
<div class="flex flex-row gap-x-2 md:gap-x-5 mt-4 md:mt-0">
<button
class="uppercase px-2 md:px-1 lg:px-3 rounded-md py-3 text-sm bg-green-500 text-gray-800 font-semibold hover:bg-green-400">accept
cookies</button>
<button
class="px-2 md:px-1 rounded-md py-2 underline text-sm text-green-500 font-semibold hover:text-green-400">Privacy
Police</button>
</div>
</div>
</div>
<div
class="max-w-5xl sm:mx-auto flex flex-row items-center bg-indigo-800 p-4 md:p-3 leading-none font-medium rounded-3xl shadow-2xl shadow-indigo-700">
<div class="flex flex-col md:flex-row justify-between items-center text-gray-300">
<div class="flex-initial inline-flex w-full md:w-8/12 items-center text-justify text-sm pr-4">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2 text-indigo-300" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
</span>
Notice: Rookie uses cookies to provide necessary website functionality and improve your experience. By using
our website, you agree to our Privacy Policy and our Cookies Policy.
</div>
<div class="flex flex-row gap-x-2 md:gap-x-5 mt-4 md:mt-0">
<button
class="uppercase px-2 md:px-1 lg:px-3 rounded-md py-3 text-sm bg-indigo-300 text-gray-800 font-semibold hover:bg-indigo-100">accept
cookies</button>
<button
class="px-2 md:px-1 rounded-md py-2 underline text-sm text-indigo-300 font-semibold hover:text-indigo-100">Privacy
Police</button>
</div>
</div>
</div>
<div
class="max-w-5xl sm:mx-auto flex flex-row items-center bg-pink-800 p-4 md:p-3 leading-none font-medium rounded-3xl shadow-2xl shadow-pink-700">
<div class="flex flex-col md:flex-row justify-between items-center text-gray-300">
<div class="flex-initial inline-flex w-full md:w-8/12 items-center text-justify text-sm pr-4">
<span class="">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2 text-pink-300" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
</span>
Notice: Rookie uses cookies to provide necessary website functionality and improve your experience. By using
our website, you agree to our Privacy Policy and our Cookies Policy.
</div>
<div class="flex flex-row gap-x-2 md:gap-x-5 mt-4 md:mt-0">
<button
class="uppercase px-2 md:px-1 lg:px-3 rounded-md py-3 text-sm bg-pink-300 text-gray-800 font-semibold hover:bg-pink-100">accept
cookies</button>
<button
class="px-2 md:px-1 rounded-md py-2 underline text-sm text-pink-300 font-semibold hover:text-pink-100">Privacy
Police</button>
</div>
</div>
</div>
</div>
</section>