JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="top_box">
            <div class="homeform">
                <input type="email" placeholder="Your E-Mail">
                <input type="password" placeholder="Your Password">
                <input type="Submit" value="Login">
            </div>
        </div>
        <div class="background"></div>
        		<div id="title_bar">
        			<div class="home">Home</div>
        			<div class="about_us">About Us</div>
       			 	<div class="our_services">Our Services</div>
        			<div class="you_in">You're In Safe Hands</div>
        			<div class="s_p">Student & Parent Zone</div>
        		</div>      
        <div id="main_box"></div>
        <div id="Bottom_box"></div>
    </div>
</body>

CSS

html, body {
    background-color:rgba(255, 160, 0, .5);
}
#wrapper {
    width: 90%;
    margin: 0 auto;
    color:#CCC;
}
#top_box {
    background: grey;
    left: 80.8%;
    width:20%;
    position: relative;
    top: 0;
    z-index: 5;
}
.homeform input[type="email"], .homeform input[type="password"] {
    position:relative;
    width:80%;
}
.background {
    position: absolute;
    min-width: 90%;
    max-width: 90%;
    margin: 0 auto;
    height: 92%;
    right: 5%;
    background: white;
    width: 80%;
    border: 5px rgba(0, 239, 255, 0.5) solid;
}

#title_bar {
 	margin-top:78px;
 	left:-16px;
    width:101.68%;
    height:60px;
    background:blue;
    position:relative;
    top:-70px;
    z-index:3;
	border: 3px rgba(255, 105, 180, 1) solid;
    background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
    background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
    background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);	
}

.home {
	font-family:apple;
    position:relative;
    font-size:25px;
    color:black;
	top:20%;
	display:inline-block;
}

.about_us {
	font-family:apple;
	position: relative;
	color:black;
	font-size:25px;
	top:20%;
	left:7%;
	display:inline-block;
}

.our_services {
	font-family:apple;
	position: relative;
	color:black;
	font-size:25px;
	top:20%;
	left:13%;
	display:inline-block;
}

.you_in {
	font-family:apple;
	position: relative;
	color:black;
	font-size:25px;
	top:20%;
	left:33%;
	display:inline-block;
}

.s_p{
	font-family:apple;
	position: relative;
	color:black;
	font-size:25px;
	top:20%;
	left:34%;
	display:inline-block;
}