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">
      <div class="container">
      <div class="left">
      <p class="notice">Um bestmöglichen Service zu gewährleisten, verwenden wir Cookies, Google Analytics und Facebook Remarketing. Bitte stimmen Sie der Nutzung zu. In unserer <a href="#">Datenschutzerklärung</a> erfahren Sie mehr und können jederzeit widersprechen.</p>
      </div>
      <div class="right">
        <!--<button class="yesfb">FB ja.</button>-->
        <!--<button class="yesga">GA ja.</button>-->
        <button class="noall">Ich stimme nicht zu.</button>
        <button class="yesall">Ich stimme zu.</button>
      </div>
    </div>
  </div>
</div>

<button class="clearcookie">Gesetzte Cookies löschen</button>
<!--<a href="javascript:gaOptout();">Google Analytics deaktivieren</a>-->

<div class="status">
<p class="ga"></p>
<p class="fb"></p>
</div>

CSS

#cookie-bar {
  display:none;
  position:relative;
  z-index:1000;
}

#cookie-bar:after {
  position:relative;
  width: 1px;
  padding-top: 150px;
  float: left;
  content: "";
}

#cookie-bar .inside {
  margin: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px;
  background:#FFFFFF;
  border-top:2px solid #000000;
}

#cookie-bar .inside p {
  font-size:1rem !important;
  line-height:1.2 !important;
  color:#004769;
  margin:0;
}
#cookie-bar .inside p a {
	color:#009ec0;
}


#cookie-bar .inside .container {
  max-width:1160px;
  padding-right:20px;
  padding-left:20px;
  margin:auto;
}

#cookie-bar .inside .left {
  width: 70%;
  margin-right:5%;
  float: left;
}

#cookie-bar .inside .right {
  position: relative;
  display: inline;
}

#cookie-bar .inside .right button {
    margin-top: 5px;
    -webkit-appearance: none;
    background: none;
    border: 2px solid #004769;
	padding: 5px;
	line-height: 1;
	cursor:pointer;
}

#cookie-bar .inside .right button.noall {
  border:0;
}

#cookie-bar .inside .right button.yesall {
  background:#ABDB93;
}

#cookie-bar .inside .right button:hover {
	background:#000;
	color:#FFF;
}

JavaScript

//short cookiebar script with cookie opt-in FB/Analytics or both
(function ($) {
  $(document).ready(function() {
  	//var analyticsid = "UA-637399-3";
    var cookiefb = Cookies.get('facebook');
    var cookiega = Cookies.get('analytics');

      //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 cookiefb !== "undefined" && typeof cookiega !== "undefined") {
		$("#cookie-bar").css("display","none");
	    }
	    else {
	   	  $("#cookie-bar").appendTo("body");
	      $("#cookie-bar").show(750);
	    }
    }

      //Wenn Analytics Optin gesetzt
      if (cookiega == "gaoptin") {
        console.log("Analytics Tracking akzeptiert. Opt-In ist aktiv.");
        $(".status p.ga").text("Google Analytics deaktivieren.").addClass("active");
        check();
        startga();
      }
      else
      {
          console.log("Analytics Opt-In ist nicht aktiv.");
          $(".status p.ga").text("Das Analytics Tracking ist nicht aktiv.");
      }

      //Wenn Facebook Optin gesetzt
      if (cookiefb == 'fboptin') {
      console.log("Facebook Tracking akzeptiert. Opt-In aktiv.");
      $(".status p.fb").text("Facebook Tracking deaktivieren.").addClass("active");
      $.getScript("/files/scripts/fbpx-id.js");
      }
      else {
        console.log("Facebook Opt-In inaktiv.");
        $(".status p.fb").text("Das Facebook Tracking ist nicht aktiv.");
     ...