JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<script>
    cookielaw('boxportable', 750, '#5C9DFF', '#fff');
</script>

CSS

* {
    margin: 0;
    padding: 0;
}

JavaScript

function cookielaw(company, wrapwidth, bg, color){
    if (document.cookie.indexOf("visited") >= 0) {
        alert("hello again");
    } else {
        document.body.innerHTML = '<div id="cookiebar"><div id="cookiewrapper">This web site uses cookies to improve your experience. By viewing the content of '+company+', you are accepting the use of cookies.</div></div>';
        var run = function() {
            fadeOut(750, this);
            expiry = new Date();
            expiry.setTime(expiry.getTime()+(10*60*1000));
            document.cookie = "visited=yes; expires=" + expiry.toGMTString();
            alert("this is your first time");
        };
        document.getElementById("cookiebar").onclick = run;
        document.getElementsByTagName("a").onclick = run;
    }
    
    document.getElementById("cookiebar").style.position = "fixed";
    document.getElementById("cookiebar").style.bottom = "0";
    document.getElementById("cookiebar").style.width = "100%";
    document.getElementById("cookiebar").style.padding = "20px 0";
    document.getElementById("cookiebar").style.color = color;
    document.getElementById("cookiebar").style.background = bg;
    document.getElementById("cookiebar").style.zIndex = "100";
    document.getElementById("cookiebar").style.fontFamily = "Arial";
    document.getElementById("cookiebar").style.fontWeight = "bold";
    document.getElementById("cookiebar").style.fontSize = "12px" ;
    document.getElementById("cookiebar").style.cursor = "pointer" ;
    document.getElementById("cookiewrapper").style.width = wrapwidth+"px";
    document.getElementById("cookiewrapper").style.margin = "0 auto";
 
    function fadeOut(e,t){function s(){n-=i;t.style.opacity=n;if(n<=0){window.clearInterval(o);t.style.display="none"}}var n=1,r=50,i=r/e;var o=window.setInterval(s,r)}
}