JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.js"></script>
<div id="cookie-bar">
    <div class="inside" style="bottom:0;">
      <div class="container">
	  <!--Contao Setting {{iflng::de}} -->
	  <div class="left">
      <p class="notice">Um bestmöglichen Service zu gewährleisten, verwenden wir Cookies und Google Analytics. Bitte stimmen Sie der Nutzung zu. In unserer <a href="{{link_url::25}}" title="{{link_title::25}}">Datenschutzerklärung</a> erfahren Sie mehr und können jederzeit widersprechen.</p>
      </div>
      <div class="right">
        <button class="noall">Ich stimme nicht zu.</button>
        <button name="Analytics Opt-In" class="yesall">Ich stimme zu.</button>
      </div>
      <!-- Contao Setting {{iflng::en}}
      <div class="left">
      <p class="notice">In order to ensure the best possible service, we use cookies and Google Analytics. Please consent to the use of cookies. Please check our <a href="{{link_url::156}}" title="{{link_title::156}}">Privacy Policy</a> in order to find out more and in case you would like to object to the use of cookies and Google Analytics at any given time.</p>
      </div>
      <div class="right">
        <button class="noall">I don't consent.</button>
        <button class="yesall">I consent.</button>
      </div>
      {{iflng}}
      -->
    </div>
  </div>
</div>

CSS

#cookie-bar {
    position:relative;
    display:none;
    z-index:1000;
}
#cookie-bar:after {
    width:1px;
    position:relative;
    float:left;
    padding-top:150px;
    content: "";
}
#cookie-bar .inside {
    bottom:0;
    left:0;
    right:0;
    position:fixed;
    float:left;
    margin:auto;
    padding:20px;
    border-top:2px solid #CBBFB1;
    background:#FFFFFF;
}
#cookie-bar .inside p {
    margin:0;
    color:#252525;
    font-size:1rem !important;
    line-height:1.2 !important;
}
#cookie-bar .inside p a {
    color:#2D5991;
}
#cookie-bar .inside p a:hover {
    border-color:#2D5991;
}
#cookie-bar .inside .container {
    max-width:1280px;
    margin:auto;
    padding-right:20px;
    padding-left:20px;
}
#cookie-bar .inside .left {
    width:70%;
    float:left;
    margin-right:5%;
}
@media screen and (max-width: 600px) { #cookie-bar .inside .left {
    width:100%;
    float:none;
    display:block;
    }
}
#cookie-bar .inside .right {
    position:relative;
    float:right;
    display:inline;
    white-space:nowrap;
}
#cookie-bar .inside button {
    margin-top:10px !important;
    margin-bottom:10px !imporant;
}
#cookie-bar .inside .right button {
    margin-top:5px;
    padding:5px;
    border:2px solid #2D5991;
    border-radius:3px;
    line-height:1;
    color:#2D5991;
    -webkit-appearance: none;
    background: none;
    cursor:pointer;
}
#cookie-bar .inside .right button.noall {
    margin-right:10px;
    border:2px solid #EBE3D5;
}
#cookie-bar .inside .right button:hover {
    background-color:#2D5991;
    border-color:#2D5991;
    color:#FFF;
}
#main .ce_text .status .ga {
    font-weight:600;
}
#main .ce_text .status .ga.active {
    border-bottom:1px solid;
    color:#2D5991;
    border-color:transparent;
    cursor:pointer;
}
#main .ce_text .status .ga.active:hover {
    border-color:#2D5991;
}

JavaScript

//short cookiebar script with cookie opt-in for Analytics / FB or both
(function ($) {
  $(document).ready(function() {
  	var analyticsid = "UA-XXXXX-XXX";
    var cookiega = Cookies.get('analytics');
    var browserlang = document.getElementsByTagName('html')[0].getAttribute('lang');

      //Analytics Function
      function startga(){
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
          //ga('create', '<?= $GoogleAnalyticsId ?>', 'auto');
          ga('create', analyticsid, 'auto');
          ga('set', 'anonymizeIp', true);
          ga('send', 'pageview');
        }
        
    function check(){
		//Cookiebar anzeigen wenn kein Cookie gesetzt ist -> undefined
		if (typeof cookiega !== "undefined") {
		$("#cookie-bar").css("display","none");
	    }
	    else {
	   	  $("#cookie-bar").appendTo("body");
	      $("#cookie-bar").show(750);
	    }
    }

      //Wenn Analytics Optin gesetzt
      if (cookiega == "gaoptin") {
		if(browserlang=='de') {
        	console.log("Analytics Tracking akzeptiert. Opt-In ist aktiv.");
        	$(".status .ga").text("Google Analytics deaktivieren.").addClass("active");
        }
        else
        {
        	console.log("Analytics tracking accepted. Opt-In is active.");
        	$(".status .ga").text("Deactivate Google Analytics.").addClass("active");        	
        }
        check();
        startga();
      }
      else
      {
      	if(browserlang=='de') {
        	console.log("Analytics Opt-In ist nicht aktiv.");
        	$(".status .ga").text("Das Analytics Tracking ist nicht aktiv.");
		}
		else
		{
        	console.log("Analytics Opt-In is not active.");
        	$(".status .ga").text("The Analytics Tracking is not active.");		
		}
     ...