JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo"></div>
    <div id="bar_outside"></div>
    <div id="box1"></div>
    <div id="middle_box"></div>
    <div id="service"></div>
    <div id="safehands"></div>
    <div id="spz"></div>
    <div id="copyright"></div>
    <div id="white_box"></div>
    <a href="#" class="myButton">Log In</a>
    <a href="#" class="sign_up">Sign Up</a>

    <div id="home">Home</div>
    <div id="about">About Us</div>
    <div id="our">Our Services</div>
    <div id="your_in">You're In Safe Hands</div>
    <div id="student">Student & Parent Zone</div>
    <div id="copy">© Copyright</div>
    <div id="travelle">TravElle</div>
    <div id="date">2014</div>
    <div id="web">www.travelle.com</div>
    <div id="all">All Rights Reserved</div>
  

<div id="signin"> 
      <h1>
<input type="text" name="textbox1" value="Username" onfocus="<!-- if
(this.value==this.defaultValue) this.value=''; -->" size="19" height="10"/>
<input type="password" name="password" value="Password" onfocus="if
(this.value==this.defaultValue) this.value='';" size="19" height="10"/>
   </h1>
   </div>

CSS

@charset"UTF-8";

#signin 
{
    position:absolute;
	min-width:22%;
	height:11.89%;
    top:0%;
    right:0%;
    z-index:10;
	Background-color:rgba(60, 0, 0, 0.2);
    border: 1px solid grey;
    
}
#signin input
{
	font-family:apple;
 	background-color:#FFF;
    height:20px;
    font-size:12pt;  
}

/* CSS Document */
 @font-face {
    font-family:apple;
    src:url(Fonts/webfontkit-20140129-101837/apple_chancery-webfont.ttf);
}
html, body 
{
	background-color:rgba(255, 160, 0, 0.5);
}

#white_box 
{
	position: absolute;
	min-width: 90%;
	max-width: 90%;
	margin: 0 auto;
	height: 92%;
	top: 0%;
	left: 54px;
	right: 5%;
	background: white;
	z-index: 0;
	width: 80%;
	border: 5px rgba(0, 239, 255, 0.5) solid;
	border-top: none;
}

#logo 
{
	position: absolute;
	background-image:url(logo/Logo.png);
	background-size: 100%;
	width: 600px;
	height: 400px;
	margin: 0 auto;
	z-index: 8;
	top:-1.37%;
	left:35%;
	background-repeat: no-repeat;
}

#middle_box 
{
    margin-top:78px;
    min-width:99%;
    max-width:110%;
    height:45px;
    background:blue;
    position:absolute;
    left:0.6%;
    top:1.5%;
    z-index:3;
    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%);
}

#bar_outside 
{
    margin-top:75px;
    min-width:100%;
    max-width:120%;
    height:55px;
    background:#ff69b4;
    position:absolute;
	top:1.28%;
    left:0px;
    z-index:2;
}

#box1 
{
    margin-bottom:0px;
    min-width:21.6%;
    max-width:39.03%;
    height:55px;
    background:#000;
    position:absolute;
    opacity:0.3;
    z-index:4;
    left:39%;
  ...