JSFiddle - React, Tailwind, and code Playground

HTML

<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">

</head>
<body>
    <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>
  
  <h1>
<div id=signin> 
<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"/>
   </div>
   </h1>
   
</body>

</html>

CSS

@charset"UTF-8";
body {position:relative;}
#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(../college/work/Website/Fonts/webfontkit-20140129-101837/apple_chancery-webfont.ttf);
}

	html, body 
{
	background-color:rgba(255, 160, 0, 0.5);
	html, body {height:100%}
}

#white_box 
{
    position:absolute;
    min-width:90%;
    max-width:90%;
    margin:0 auto;
    height:92%;
    top:0%;
    left:5%;
    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(../college/work/Website/Logo/png/Logo.png);
	background-size: 100%;
	width: 600px;
	height: 400px;
	margin: 0 auto;
	z-index: 8;
	top: 28px;
	left: 77px;
	right: 0px;
	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;
    left:0px;
    z-index:2;
}

#box1 
{
    margin-bottom:0px;
   ...