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="home"></div>
    <div id="about"></div>
    <div id="service"></div>
    <div id="safehands"></div>
    <div id="spz"></div>
    <div id="copyright"></div>
    <div id="white_box"></div>
    <div id="home">Home</div>
    <div id="about">About</div>
    <div id="us">Us</div>
    <div id="our">Our</div>
    <div id="services">Services</div>
    <div id="your_in">You're In</div>
    <div id="safe_hands">Safe Hands</div>
    <div id="student">Student &</div>
    <div id="parent">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" size="25%" height="50"/></br>
<input type="text" name="textbox2" size="25%" height="50"/>
    </div>
</h1>

</body>

</html>

CSS

@charset"UTF-8";

#signin 
{
    position:absolute;
	  min-width:22%;
	  height 20%;
    top:0%;
    right:0%;
    z-index:10;
    background-color:#CCC;
    border: 1px solid grey;
    
}
#signin input {
 background-color:#FFF  
}

/* 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, 165, 0, 0.5);
}

#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:-1.8%;
    left:20%;
    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;
    min-width:21.6%;
    max-width:39.03%;
    height:55px;
    background:#000;
    position:absolute;
   ...