JSFiddle - React, Tailwind, and code Playground

by nikhilbs09_1

HTML

<body>

    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="t1" runat="server"> </asp:ToolkitScriptManager>
<div class="mainbox pn mbstyles2">
	
      <div class="fl whp box_BelowNav pn tlz">
      <div class="box_BelowNav_img pn fl">
        <img src="../Images/Flag.png" /></div>
       <div class="a1 fl pn">
       <h1>GT SYSTEMS</h1>
       	
       </div>
       <div class="flag_right fr pn" > 
        	<img src="../Images/eng_32_23.jpg" title="Click to view this website in English language." class="pn fr" style="border-left:1px #0F6 solid;padding-left:4px;" /> <img src="../Images/france_32_2.gif" title="Click to view this website in French language." class="pn fr loc"/>
        </div>
      
      </div>
      
    <div class="whp pn hpx fl header1style clearfix">
    	
        <uc1:MainHeader id="Header1" runat="server" EnableTheming="True"></uc1:MainHeader>
		
		</div>
       
        <!-- end of top here -->
        <div>
         
       <div class="pn fl contentbox1 whp">
               
        
        
        
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>

        </div>

    
   
</div> 
    </form>
</body>
</html>

CSS

.mainbox
{
	margin-left:auto;
	margin-right:auto;
	width:80%; height:auto
}
.mbstyles, .mbstyles2
{
	height:662px;background-color:#FDFBDB;border:2px solid #665202
}
.mbstyles2{background-color:Aqua;}
.tlz{top:0;left:0}.whp{width:100%}.hpx{height:41px}.apn{position:absolute}
.pn{position:relative}
.fl{float:left}.fr{float:right}
.header1{height:30px} body{margin-top:auto;font-size:14px;font-family:sans-serif, Helvetica, Arial}
.flag_right
{
	top:13px;
right:10px;
height:32px;
width:100px;
/*background-color:#0CF;*/
}
.loc{
right:5px;}
.header1style
{
	background-color:#665202;	
}.header1styleB{background-color:#665202}
.fontsize{font-size:18px}
.nav{width:65%;/*background-color:#C93;*/}
.nav ul{margin:0;padding:0}
.nav ul li{list-style:none;float:left;line-height:40px;text-align:center;border-right:solid #CF9 1px}
.nav ul li a:link{text-decoration:none;color:#CF9}
.nav ul li a:visited{color:#CF9;}
.nav ul li a:hover{text-decoration:underline;display:block;background-color:#FDFBDB;color:#303;font-size:12px}
.box_BelowNav{height:110px;background-color:#CCCC99}	
.box_BelowNav_styles, .a1
{
	width: 209px;
	height: 80px;
	color: #665202;
	margin-top: 0;
	padding: 0;
	top: 15px;
	left: 10px;
	border-right:2px solid #303;  
}
.box_BelowNav_img
{
	width: 120px;
	height: 60px;
	color: #303;
	padding-left:15px;
	margin-top: 0;
	padding: 0;
	top: 25px;
	left: 10px;
	border-right:2px solid #665202;  
}
.a1{
	width:420px;top:20px; left:30px; height:auto;
	font-style:italic;font-size:18px;color:#665202;line-height:22px;text-align:justify;	
	/*padding-left:30px;padding-top:7px;*/ border-right:none
}
.contentbox
	{
    height:450px;
	top: 0px;
	left: 0px;/*background-color:blue;*/
}
.footer
{
	bottom:-22.5px;left:0px;
	text-align:center;
	background-color:#665202;
	}

 .contentbox1
{
    height:460px;background-color:Blue/*460px;*/
}