<div class="fixed bottom-0 inset-x-0 z-50 p-4" x-data="{ open: true }" :class="{ 'hidden': !open }">
<div class="pt-14 pb-20 px-8 md:px-18 bg-yellowGray-500 rounded-3xl">
<div class="flex flex-wrap -mx-4">
<div class="w-full xl:w-2/3 px-4">
<div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-8">
<span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
<span class="uppercase text-sm font-medium tracking-tight">COOOOKIES</span>
</div>
<h1 class="text-4xl font-heading mb-8">Cookies on this site</h1>
<p class="max-w-4xl">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.</p>
</div>
<div class="w-full xl:w-1/3 px-4 pt-16">
<div class="flex flex-wrap items-center -mb-4">
<a x-on:click.prevent="open = false" class="group relative inline-block h-16 sm:mr-6 mb-4 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
<div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
<div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-blueGray-900 rounded">
<span class="text-base font-semibold uppercase">Allow</span>
</div>
</div>
</a>
<a class="group relative inline-block h-16 mb-4 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
<div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
<div class="flex h-full w-full items-center justify-center bg-white border-2 border-blueGray-900 rounded">
<span class="text-base font-semibold uppercase">More</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
Cookies Components by Shuffle
Choose from 5 variations of Cookies UI components. Presented here are variants available in Suncealand library.
You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Cookies UI components, code and our visual editor. Try the demo for free!