JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div id="header"> </div>
<div id = "menu"> 


<div id="menu-content">
<ul>
      <li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>


      <li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>

  </li>
      <li><a class="menu" href="../images/header.jpg">View Applicants</a></li>

  </ul>
</div>
</div>
  <div id="container" >
    <div id="sidebar"> 
    <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
       <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
    </div>
    <div id="content">



</div>
</div>
<div id ="footer"> </div>

CSS

li
{
display:inline;

background-color: #c5e8cf;
}

a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}

a.side { border-bottom: 2px solid black;
    background-color: #e3e7ec;
    }
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
        display:inline-block;
        font-size: 20px;
        background-color: #e3e7ec;
        border-bottom: 2px solid black;
        padding-bottom: 20px;
        }
label.side:hover { background-color: #dde504;}

div#header {
    position: float;
    background-image: url("../images/header.jpg");
    background-repeat: no-repeat;
    border-bottom: solid 1px #999999;
    height: 97px;
           Width: 1000px;
        margin-left: 114px;
        margin-top: 10px;
        background-size: 100%;
}

div#menu { 
position: float;    
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
      margin-left: 115px;
padding-top:5px;

background-color: #e3f6ea;
}
#menu-content { 
margin: auto;
width:100%;
background-color: #c5e8cf;

}

div#container{

border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}

div#sidebar { 
    position: relative;
border:2px solid #999999;
Width: 131px;

padding-bottom: 1000px;
margin-bottom: -1000px;

background-color: #c5cfd9;
overflow: hidden;
    float:right;
}

div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
    float:left;
}

div#footer { position: relative;
        border: solid 2px #999999;

        width: 996px;
        height: 50px;
        background-color: #FFFFFF;
        margin-left: 115px;
}

#body { background-color: #6b86a3;}