JSFiddle - React, Tailwind, and code Playground

by mstalfoort

HTML

<div id="cookie-optin">

    <div class="wrapper">

        <p class="left">De websites van Wegener Media maken gebruik van cookies. Wat betekent dit voor u? <a href="/cookie-informatie-carsomnl">Info</a></p>

        <p class="right"><a id="cookie-optin-handler" href="javascript:;">Deze melding verbergen</a></p>

    </div>

 </div>

CSS

#cookie-optin {
 	 
    display: none;

    margin: -10px -20px 0;

    background: #ECF0F1;

    border-bottom: 1px solid #C3C3C3;

    font-size: 1.3em;

}



#cookie-optin .wrapper {

    width: 980px;
    margin: 0 auto;
    padding: 20px 0 10px;

    overflow: hidden;

}
#cookie-optin p { margin: 0; }
#cookie-optin p.left { float: left; }
#cookie-optin p.right { float: right; }

JavaScript

if (!document.cookie.match(/optin=1/)) {

            $('body').prepend($('#cookie-optin'));

            $("#cookie-optin").show();

            $("#cookie-optin-handler").click(function(){

                //set cooky

                var domain=document.domain+"";

                domain=domain.replace(/.+\.([\w\-]+\.[a-z]+)$/i,"$1");

                domain=";domain="+domain;

                var date=new Date();

                date.setTime(date.getTime()+(31536000000));

                var expires=";expires="+date.toGMTString();

                document.cookie="optin=1"+expires+";path=/"+domain;

                

                $("#cookie-optin").hide();
            });

        }