JSFiddle - React, Tailwind, and code Playground

by Cory Hughes

HTML

<div class="newuser">New User</div>
<div class="returninguser" style="visibility:hidden;">Returning User</div>

CSS

body {
  text-align: center;
  vertical-align: top;
}
div.newuser,
div.returninguser {
  margin: 0px auto;
  border: solid 5px #e00034;
  background: #101820;
  color: #ffffff;
  padding: 50px;
  border-radius: 50px;
  max-width: 500px;
  font-size: 50px;
}

JavaScript

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}


var x = getCookie('ppkcookie');
if (x) {
    console.log("cookie is there...")
		document.getElementsByClassName('newuser')[0].style.visibility = 'hidden';
		document.getElementsByClassName('returninguser')[0].style.visibility = 'visible';
} else {
		setCookie('ppkcookie','testcookie',1);
}