<div x-data="{ modal: true }" :class="{'hidden': !modal}" class="fixed z-50 bottom-0 w-full p-6 md:p-16">
<div class="container mx-auto px-4">
<div class="py-6 px-10 mx-auto w-full bg-white border rounded-2xl">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
<h5 class="text-lg font-medium">Privacy Settings</h5>
<p class="text-gray-700">This site uses third-party website tracking technologies to provide and continually improve our services.</p>
</div>
<div class="w-full md:w-1/2 px-4">
<div class="flex flex-wrap md:justify-end -mb-3">
<div class="w-auto mb-3 mr-4">
<a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-teal-900 rounded-full transition duration-200">Deny</a>
</div>
<div class="w-auto mb-3">
<a x-on:click.prevent="modal = false" href="#" class="inline-flex py-4 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Accept All</a>
</div>
</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
