JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

<button id="btn">
Consent
</button>

<div class="fixed-bottom p-4">
    <div class=" toast bg-dark text-white w-100 mw-100" role="alert" data-autohide="false">
        <div class="toast-body p-4 d-flex flex-column">
            <h4>Cookie Warning</h4>
            <p>
                This website stores data such as cookies to enable site functionality including analytics and personalization. By using this website, you automatically accept that we use cookies.
                Read more about our cookies <a href="google.se" class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Cookies" style="background-color: #ff0000;">HERE</a>
            </p>
            <div class="ml-auto">
                <button type="button" class="btn btn-outline-light mr-3" id="btnDeny">
                    Deny
                </button>
                <button type="button" class="btn btn-light" id="btnAccept">
                    Accept
                </button>
            </div>
        </div>
    </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

body {
  background: #999;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.fixed-bottom {
  background: blue;
  
}

JavaScript

function setCookie(name, value, days) {
  $.cookie(name, value, {
    expires: days
  });
}

function getCookie(name) {
  return $.cookie(name);

}

function eraseCookie(name) {
  $.removeCookie(name);
}

function cookieConsent() {

  if (!getCookie('allowCookies')) {
    $('.toast').toast('show');
  } else {
  	$('.toast').parent().hide();
  }
}

try {
  $('#btnDeny').click(() => {
    eraseCookie('allowCookies');
    $('.toast').toast('hide');
    $('.toast').parent().hide();
  })
} catch (err) {
  // Ignore
}

try {
  $('#btnAccept').click(() => {
    setCookie('allowCookies', '1', 7)
    $('.toast').toast('hide');
    $('.toast').parent().hide()
  })
} catch (err) {
  // Ignore
}




// load
cookieConsent()