<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="fixed bottom-0 left-0 z-50 w-full p-4">
<div class="relative py-8 bg-gray-900 bg-opacity-40 rounded-5xl">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap items-center -m-2">
<div class="w-full md:w-1/2 p-2">
<h3 class="mb-2.5 text-2xl text-white font-medium tracking-2xl">Cookie Consent</h3>
<p class="text-sm text-gray-300">In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar technologies for technical purposes and, with your consent, for “basic interactions & functionalities”, “experience enhancement”, “measurement” and “targeting & advertising”. Denying consent may make related features unavailable. You can freely give, deny, or withdraw your consent at any time.Use the “I accept” button to consent to the use of such technologies.</p>
</div>
<div class="w-full md:w-1/2 p-2">
<div class="flex flex-wrap md:justify-end -m-2">
<div class="w-auto p-2"><a x-on:click.prevent="modal = false" class="inline-block px-8 py-4 font-medium tracking-tighter border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Accept All Cookies</a></div>
<div class="w-auto p-2"><a class="inline-block px-8 py-4 text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>
</div>
</div>
</div>
</div>
<a x-on:click.prevent="modal = false" class="absolute top-7 right-7" href="#">
<img src="nightsable-assets/images/cookies/close-white.png" alt="">
</a>
</div>
</section>
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
