JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script type="text/javascript">
function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
        cookie_string += "; path=" + escape ( path );

  if ( domain )
        cookie_string += "; domain=" + escape ( domain );
  
  if ( secure )
        cookie_string += "; secure";
  
  document.cookie = cookie_string;
}

function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

  if ( results )
    return ( unescape ( results[2] ) );
  else
    return null;
}

function Login()
    {
    var username = document.getElementById("username").value;
    LoginBox.innerHTML = username
    set_cookie("username", username, 2012, 12, 23);
    }
    
function checkCookie()
{
var username = get_cookie("username");
var LoginBox = document.getElementById("LoginBox");    
if (username ){
LoginBox.innerHTML = username;
}
}

</script>
</head><body onload="checkCookie()">
 <div id="LoginBox">

    Username:
    <input type="text" id="username" />
    Password:
    <input type="password" id="password" />
    <input type="button" onclick="Login()" value="Login"
    </div>
    
</body>