JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginPage" data-role="page">
            <div data-role="header">
                <h1>Authenticate</h1>
            </div>
            <div data-role="content">
                <form id="loginForm">
                    <div class="holo-list">
                        <input type="text" name="username" id="username" placeholder="Username"/>
                        <input type="password" name="password" id="password" placeholder="Password"/>
                    </div>
                    <div class="holo-buttons">
                        <button id="loginButton" class="holo-button">Login</button>
                        <button id="registerButton" class="holo-button">Register</button>
                    </div>
                </form>
            </div>
            <div data-role="footer">
                <h4>Chris Runo</h4>
            </div>
        </div>
        <div id="accent" class="holo-accent-blue">
            <div class="holo-action-bar">
                <ul class="holo-action-buttons">
                    <li><a href="#" class="holo-action-overflow" id="settings">Logout</a></li>
                </ul>
                <div class="holo-fixed-tabs">
                    <ul id="nav">
                        <li><a href="#profile">Profile</a></li>
                        <li><a href="#webdata">Web Data</a></li>
                    </ul>
                </div>
            </div>
            <div id="profile" class="holo-content">
                <h1>Profile</h1>
                <ul class="holo-list">
                    <li>Name:<span id="name"></span></li>
                    <li>Gender:<span id="gender"></span></li>
                    <li>Age:<span id="age"></span></li>
                    <li>Address:<span id="address"></span></li>
                    <li>Phone:<span id="phone"></span></li>
                    <li>Email:<span id="email"></span></li>
                </ul>
                
                <div class="holo-buttons">
                  ...

CSS

#holo-popup-home{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.4);
    height: 100%;
    width: 100%;
    z-index: 999;
    display: none;
}

.holo-popup-wrapper{
    position: absolute;
    top: 100px;
    left: 5%;
    width: 90%;
    box-shadow: 1px 1px 2px rgba(0,0,0.2);
    border-radius: 1px;
    padding-bottom: 70px;
}

.holo-popup{
    position: absolute;
    left: 5%;
    top: 150px;
    width: 90%;
    padding-bottom: 110px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background-color:black;
}

#loginPage{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    text-align:center;
}

#accent{
    display:none;
}

#editProfile{
    position: absolute;
    top: 100px;
    left: 5%;
    width: 90%;
    box-shadow: 1px 1px 2px rgba(0,0,0.2);
    border-radius: 1px;
    padding-bottom: 70px;
    display:none;
}

#settingsPage{
    position: absolute;
    top: 100px;
    left: 5%;
    width: 90%;
    box-shadow: 1px 1px 2px rgba(0,0,0.2);
    border-radius: 1px;
    padding-bottom: 70px;
    display:none;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

JavaScript

$('#registerButton').click(function(){
        var inu = $('#username').val();
        var inp = $('#password').val();
        localStorage.setItem('Username',inu);
        localStorage.setItem('Password',inp);
    });

    $('#loginButton').click(function(e){
        e.preventDefault();
    	if(localStorage.getItem('Username') != null || localStorage.getItem('Username') != ''){
	        var cu = localStorage.getItem('Username');
	        var cp = localStorage.getItem('Password');
            alert(cu);//I've alerted to show that the getItem is working
            alert(cp);
	        var iu = $('#username').val();
	        var ip = $('#password').val();
	        if(iu == cu && ip == cp){
	            $('#login').hide(0);
	            $('#accent').show(0);
	            localStorage.setItem('Logged In', 'yes');
	            $('#name').val() == localStorage.getItem('Name');
			    $('#gender').val() == localStorage.getItem('Gender');
			    $('#age').val() == localStorage.getItem('Age');
			    $('#address').val() == localStorage.getItem('Address');
			    $('#phone').val() == localStorage.getItem('Phone');
			    $('#email').val() == localStorage.getItem('Email');
	        }else{
	            alert('Incorrect username/password combo.');
	        }
        }
    });

    $('#settings').click(function(){
        fadeIn("holo-popup-home");
        $('#settingsPage').show(0);
    });

    $("#cancelLogout").click(function(){
        fadeOut("holo-popup-home");
        $("settingsPage").hide(0);
    });
    
    $("#logout").click(function(){
        fadeOut("popupwrapperhome");
        $('#settingsPage').hide(0);
        $('#accent').hide(0);
        $('login').show(0);
    });
    
    $("#edit").click(function(){
        fadeIn("holo-popup-home");
        $('#editProfile').show(0);
    });

    $("#editCancel").click(function(){
        fadeOut("holo-popup-home");
        $("#editProfile").hide(0);
    });

    $("#submitEdit").click(function(){
       ...