<div class="fixed bottom-0 inset-x-0 pt-5 px-5 pb-10 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
<div class="container px-4 mx-auto mt-8">
<div class="p-8 bg-black border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
<h3 class="mb-2 text-2xl font-black font-heading text-pink-500 tracking-tight">COOKIE POLICY</h3>
<p class="mb-8 text-white leading-relaxed font-medium text-lg">We use cookies to
personalise content, to provide social media features and to analyse our traffic. We also share information
about your use of our site with our social media, advertising and analytics partners. If you want to change your
cookie setting, please see the 'how to reject cookies' section of our . Otherwise, if you agree to our use of
cookies, please continue to use our website.</p>
<div class="w-full flex flex-col sm:flex-row gap-4">
<a x-on:click.prevent="open=false" class="inline-block px-6 py-4 bg-pink-500 hover:bg-yellow-300 text-center text-white hover:text-black font-black font-heading text-base border-4 border-white transition-all hover:translate-x-2 hover:translate-y-2 shadow-[6px_6px_0px_0px_#ffffff] hover:shadow-[3px_3px_0px_0px_#ffffff]" href="#">ALLOW</a>
<a x-on:click.prevent="open=false" class="inline-block px-6 py-4 bg-black hover:bg-pink-500 text-center text-white font-black font-heading text-base border-4 border-white transition-all hover:translate-x-2 hover:translate-y-2 shadow-[6px_6px_0px_0px_#ffffff] hover:shadow-[3px_3px_0px_0px_#ffffff]" href="#">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
