<div :class="{'hidden': !open}" class="fixed bottom-0 left-0 z-40 w-full p-6" x-data="{ open: true }">
<div class="max-w-5xl mx-auto bg-white border border-gray-100 overflow-hidden rounded-3xl">
<div class="py-14 px-8 md:px-14">
<h2 class="mb-6 font-heading text-2xl font-bold">We use third-party cookies to personalize content, ads, and analyze site traffic.</h2>
<p class="text-lg font-light text-gray-500">Vestibulum sit amet nisi volutpat, sagittis metus et, posuere magna. Sed venenatis metus turpis, eget malesuada nulla posuere facilisis consequat ac volutpat a, ultrices.</p>
</div>
<div class="py-6 px-8 md:px-14 bg-gray-50">
<div class="flex flex-wrap gap-2">
<a href="#" x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Allow cookies</a>
<a href="#" x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center h-12 p-5 px-6 font-semibold text-black hover:text-black focus:text-black bg-transparent hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 focus:ring-opacity-50 transition duration-200">Decline</a>
</div>
</div>
</div>
</div>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
