<section class="is-fixed is-left-0 is-bottom-0 p-6" style="z-index: 50;">
<div class="container">
<div class="has-background-grey-darker py-6 px-8" style="border-radius: 6px;">
<div class="columns is-align-items-center">
<div class="column is-narrow pr-4">
<img src="acros-assets/icons/cookies/cookie.svg" alt="">
</div>
<div class="column pl-4">
<h5 class="title is-size-5 has-text-white has-text-weight-medium mb-2">Cookie Policy</h5>
<p class="subtitle is-size-6 has-text-white mb-0">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
<p class="subtitle is-size-6 has-text-white">We also share information about your use of our site with our social media, advertising and analytics partners.</p>
</div>
<div class="column is-narrow">
<div class="buttons"><a class="button is-primary py-6 mr-4" href="#">Accept</a><a class="button is-white is-outlined py-6" href="#">Decline</a></div>
</div>
</div>
</div>
</div>
</section>
<div class="fixed z-50 bottom-0 w-full p-6" x-data="{ open: true }" :class="{ 'hidden': !open }">
<div class="container mx-auto">
<div class="px-8 py-6 mx-auto w-full bg-gray-900 rounded-md">
<div class="flex flex-wrap items-center -mx-4">
<div class="w-full lg:w-auto px-4 mb-4 lg:mb-0">
<img src="acros-assets/icons/cookies/cookie.svg" alt="">
</div>
<div class="w-full lg:w-3/5 px-4 mr-auto mb-8 lg:mb-0">
<div class="max-w-2xl">
<h4 class="font-heading text-white text-lg font-medium mb-2">Cookie Policy</h4>
<p class="text-sm leading-6 text-white">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.</p>
</div>
</div>
<div class="w-full lg:w-auto px-4">
<div class="sm:flex items-center"><a x-on:click.prevent="open = false" class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Accept</a><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Decline</a></div>
</div>
</div>
</div>
</div>
</div>
Cookies Components by Shuffle
Choose from 16 variations of Cookies UI components. Presented here are variants available in Acros library.
You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Cookies UI components, code and our visual editor. Try the demo for free!