JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<!doctype html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  </head>

  <body>
    <div class='container cookie-warning'>
      <div class='row'>
        <div class='col-md-3 col-xs-12'>Cookies on the <span class='company-name'>eqt</span> website</div>
        <div class='col-md-6 col-xs-12'>EQT has updated it's cookie policy. EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy
          EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy EQT has updated it's cookie policy..</div>
        <div class='col-md-3 col-xs-12'><button class='continue'>Continue</button></div>
      </div>
    </div>
  </body>

</html>

CSS

.cookie-warning {
  background-color: #777;
  color: #fff;
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 30px;
}

.company-name {
  text-transform: uppercase;
}

.cookie-warning .col-md-3:nth-of-type(1) {
  font-size: 17px;
  line-height: 23px;
}

@media screen and (max-width: 1023px) {
  .cookie-warning .col-md-3,
  .cookie-warning .col-md-6 {
    padding-bottom: 10px;
  }
}

.cookie-warning .col-md-3:last-child {
  padding-left: 20px;
}

@media screen and (max-width: 1023px) {
  .cookie-warning .col-md-3:last-child {
    padding-left: 15px;
  }
}

.continue {
  margin-left: 0;
  background: #ff6600;
  color: #ffffff;
  font-size: 15px;
  border: 0;
  border-radius: 0;
  height: 35px;
  width: auto;
  line-height: 21px;
}

JavaScript

$('document').ready(function() {
  var EQTCookie = {
    createCookie: function(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + value + expires + "; path=/";
    },
    readCookie: function(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    },
    eraseCookie: function(name) {
      createCookie(name, "", -1);
    }
  };

  //on load, if cookie set, hide cookie warning, else show it
  var $cookieWarningBox = $('.cookie-warning');
  if (EQTCookie.readCookie('DataStoreWarnCookie')) {
    //cookie is already set, hide the cookie warning
    $cookieWarningBox.addClass('hidden');
  } else {
    //cookie isn't set, show the cookie warning
    $cookieWarningBox.removeClass('hidden');
  }

  $cookieWarningBox.on('click', '.continue', function() {
    $cookieWarningBox.slideUp('slow', function() {
      //createCookie('cookieName', 'cookieValue', 'days to expire');
      EQTCookie.createCookie('DataStoreWarnCookie', 1, 7); //set cookie expire to 7 days
    });
  });
});