<div class="fixed bottom-0 w-full z-50 p-5" :class="{ 'hidden': !open }" x-data="{ open: true }">
<div class="container mx-auto px-4">
<div class="max-w-5xl mx-auto">
<div class="bg-white rounded-lg p-8 lg:px-14">
<h6 class="font-heading text-3xl font-semibold mb-2 tracking-tight">
<span>We care about</span>
<span class="bg-orange-50 rounded-lg px-1 mx-1 inline-block">your privacy</span>
</h6>
<p class="text-neutral-600 font-semibold mb-6 tracking-tight">We use cookies and similar technologies to provide the best experience on our website. Learn more.</p>
<div class="flex flex-wrap -m-2">
<div class="w-full md:w-1/2 p-2"><a x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center w-full h-10 p-5 font-semibold tracking-tight text-sm hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Ok</a></div>
<div class="w-full md:w-1/2 p-2"><a x-on:click.prevent="open = false" class="inline-flex justify-center items-center text-center w-full h-10 p-5 font-semibold tracking-tight text-sm hover:text-white focus:text-white bg-white hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">No, thanks</a></div>
</div>
</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
