HTML

<div class="cookie-consent-banner" id="cb-cookie-banner">
  <div class="cookie-consent-banner__inner">
    <div class="cookie-consent-banner__copy">
      <div class="cookie-consent-banner__header">THIS WEBSITE USES COOKIES</div>
      <div class="cookie-consent-banner__description">We use cookies to personalise content and ads, 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 who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. You consent to our cookies if you continue to use our website.</div>
    </div>

    <div class="cookie-consent-banner__actions">
      <a href="javascript:void(0);" class="cookie-consent-banner__cta" onclick="javascript:hideCookieBanner()">
        OK
      </a>
      
      <a href="#" class="cookie-consent-banner__cta cookie-consent-banner__cta--secondary">
        Decline
      </a>
    </div>
  </div>
</div>

CSS

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2147483645;
  box-sizing: border-box;
  width: 100%;

  background-color: #F1F6F4;
}

.cookie-consent-banner__inner {     
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 0;
}

.cookie-consent-banner__copy { 
  margin-bottom: 16px;
}

.cookie-consent-banner__actions {    
}

.cookie-consent-banner__header {
  margin-bottom: 8px;
  
  font-family: "CeraPRO-Bold", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__description {
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  color: #838F93;
  font-size: 16px;
  line-height: 24px;
}

.cookie-consent-banner__cta {
  box-sizing: border-box;
  display: inline-block;
  min-width: 164px;
  padding: 11px 13px;
    
  border-radius: 2px;
  
  background-color: #2CE080;
   
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-family: "CeraPRO-Regular", sans-serif, arial;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
}

.cookie-consent-banner__cta--secondary { 
  padding: 9px 13px;
  
  border: 2px solid #3A4649;
  
  background-color: transparent;
  
  color: #2CE080;
}

.cookie-consent-banner__cta:hover {
  background-color: #20BA68;
}

.cookie-consent-banner__cta--secondary:hover {
  border-color: #838F93;
    
  background-color: transparent;
  
  color: #22C870;
}

.cookie-consent-banner__cta:last-child {
  margin-left: 16px;
}     

JS

      /* Javascript to show and hide cookie banner using localstorage */
      /* Shows the Cookie banner */
      function showCookieBanner(){
       let cookieBanner = document.getElementById("cb-cookie-banner");
       cookieBanner.style.display = "block";
      }

      /* Hides the Cookie banner and saves the value to localstorage */
      function hideCookieBanner(){
       localStorage.setItem("cb_isCookieAccepted", "yes");
       let cookieBanner = document.getElementById("cb-cookie-banner");
       cookieBanner.style.display = "none";
      }

      /* Checks the localstorage and shows Cookie banner based on it. */
      function initializeCookieBanner(){
       let isCookieAccepted = localStorage.getItem("cb_isCookieAccepted");
       console.log(isCookieAccepted);
       if(isCookieAccepted === null)
       {
        localStorage.setItem("cb_isCookieAccepted", "no");
        showCookieBanner();
       }
       if(isCookieAccepted === "no"){
        showCookieBanner();
       }
       if(isCookieAccepted === "yes"){
        hideCookieBanner();
       }
      }

      initializeCookieBanner();