JSFiddle - React, Tailwind, and code Playground

HTML

<div class="TopDiv">

    <div class="Menulist">
    <a href="MainMenu3.aspx">
    <img src="Images/32/back_32.png"  style="padding:4px;"/></a>
    <a href="MainMenu3.aspx"><img src="Images/32/home.png" /></a>
      <nav class="clearfix">
	        <ul class="clearfix">
	        <li> <a href="NewMail2.aspx">New Email</a></li>
            <li> <a href="NewMessage.aspx">New QM</a></li>
            <li><a href="#"><img runat="server" id="READARCHIVE" />Read/Arch</a></li>
            <li><a href="#"><img runat="server" id="TRASHMAIL" />Trash</a></li>
            </ul>
	        <a href="#" id="pull">Action</a>
	</nav>
         <div class="divClear"></div>
    </div>
   
    <div class="Text">
    <label class="styletext headerStyle" id="lblInbox" >Inbox</label>
    </div>

</div>

CSS

.TopDiv
{
position:fixed;
 top:0px;
 left:0px;
 height:50px;
 width:100%;
 background-color:#52c8f0;
 z-index:1;
	}
	.MidDiv
	{
		 position : fixed;
		 top: 40px;
		  left:0px;
		  background-color:#cbe2ea;
		  height:10px;
		  width:100%;
		  z-index:1;
		 
	}
		
	.BottomDiv
	{
		position:relative;
	 top:53px;
	 left:-1px;
	  width:100%;
		}
				
	
	.style3
        {
            width: 33.3%;
            height: 10px;
            text-align:left;
        }
        .style5
        {
            width: 33.3%;
            height: 27px;
            text-align: center;
        }
         .stylespecial
        {
            height: 23px;
            font-family: Arial, Helvetica, sans-serif; 
            font-size: small; 
            font-style: normal; 
            color: #808080; 
            text-decoration: none;
        }
         .styletext
        {
            font-family: Trebuchet MS; 
            font-size: 14px; 
            font-style: normal;
            font-weight:bold; 
            color: White; 
            text-decoration: none;  
        }
        .headerStyle
        {
        float:right;
   padding-right:10px;
        }
        .LoadNextStyle
        {
        	margin-top:0px;
        	color:#336699;
        }

        
body
{ background-color:#cbe2ea;
}
.Menulist
{
	width:70%;float:left;
}
.Text
{
	width:30%;
	float:left;
	height:32px;
	padding-top:10px;
}
.Menulist img
{
	padding-top:4px;
	padding-bottom:4px;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
    left:40px;
    top:-20px;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display:...