JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class='cookie-banner' style=''>
  <p>
    By using our website, you agree to our 
    <a href='https://eurobytes.nl'>cookie policy</a>
  </p>
</div>

<div class="container">
  <p>
    Lorem dorem ipsum
  </p>
</div>

CSS

.cookie-banner {
  position: fixed;
  bottom: 40px;
  left: 10%;
  right: 10%;
  width: 80%;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}


.container {  
  margin: 25px auto;
}

html,body {
  background-color: #F9F9F9;
  color: #454545;
}

JavaScript

if (localStorage.getItem('cookieSeen') != 'shown') {
    $('.cookie-banner').delay(2000).fadeIn();
    localStorage.setItem('cookieSeen', 'shown')
}
$('.close').click(function() {
    $('.cookie-banner').fadeOut();
})