JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<div class="Main_body">
			<div class="Header">
					<div class="logo">
						 <br/>
							<img src="logo/logo.jpg" width="165" height="84" alt="logo"  style="padding-right: 110px;"/>
							
	<div class="Main_menu">
	
	
				<!-- <ul id="navlist">
				<strong>
				<li id="active" style="margin-left: -50px;"><a href="#" id="current">About Us</a></li>
				<li><a href="#">Services</a></li>
				<span><li class="wraplongline"><a href="#">Management Support Services</a></li></span>
				<li><a href="#">Our Strengths</a></li>
				<li><a href="#">Managements Team</a></li>
				<li><a href="#">Contact</a></li>
				</strong>
				</ul> -->
				
<ul class="trials" style="margin-left: 0px; margin-right: 10px; margin-top: -50px;">
     <li style="padding-left: 10px; padding-right: 10px;"><span><a href="#">About Us</a></span></li>
     <li style="padding-left: 10px; padding-right: 10px;"><span><a href="#">Services</a></span></li>
     <li style="padding-left: 10px; padding-right: 10px;"><span><a href="#">Management Support Services</a></span></li>
	 <li style="padding-left: 10px; padding-right: 10px;"><span><a href="#">Our Strengths</a></span></li>
	 <li style="padding-left: 10px; padding-right: 10px;"><span><a href="#">Managements Team</a></span></li>
	 <li style="padding-left: 10px; padding-right: 10px;"><span><a href="#">Contact</a></span></li>    
 
	</ul>
				
				
	</div>
	
	<br/>
	<div class="heading">
	
	<h1 align="center" >We are Pioneers in <span style="color:#9CCC18">Organised</span> Recruitment.</h1>
	
	</div>
	
 <hr align="center"   style="width: 740px; margin-left: 130px; margin-top: -21px;"> 
 
 
	<div class="sub_heading">
	
				<h2 align="center">Comprehensive Solutions and Services to ensure the best HIRING Experience.</h2>
				
	</div>
	
	<div class="leftsidebar">
	
					<div class="left_heading_one">
					
				   <h2 align="center" ><span style="color:#FFFFFF; font-size:20px;">DESIGNED FOR EVERYONE!! </span> </h2>
				   
					</div>
					
					
					<div...

CSS

.Main_body
{
	width: 1024px; 
	height: 1500px; 
	margin-left: 100px;
	background-color:#9CCC16;
	
}

.Main_menu
{
margin-top: 50px;
}

.Header
{
width: 1005px; 
height: 300px; 
margin-left: 10px;
background-color:#FFFFFF;
}

img
{
float:left;
}





 
#navlist li
{


display: inline;
list-style-type: none;
padding-right: 20px;
padding:10px 10px;
  line-height: 10px;
font-family: calibri;
text-decoration:  none; 
color:#D1CFD0;
background:#D1CFD0;
 

border-radius:10px;
-moz-border-radius:15px; /* Old Firefox */
}




.read a:link {color: #1C1C1C;}
.read a:visited {color: #1C1C1C;}
.read a:hover {color: #9CCC16;}
.read a:focus {color: #9CCC16;}
.read a:active {color: #1C1C1C;}


a:link {
	text-decoration: none;
	color: #1C1C1C;
}

a:visited {
	text-decoration: none;
	color: #1C1C1C;
}
a:hover {
    color: #1C1C1C;
	
	text-decoration: none;
	
}
a:active {
	text-decoration: none;
	color: #1C1C1C;
}

#navlist li:hover {

  background-color: #9CCC16;
}


body {
	 font-family: "Trebuchet MS", Helvetica, sans-serif;
	 font-size: 14px;
     font-weight: normal;
     line-height: 1.7em;
}

a:link {
	 text-decoration: none;
	 font-weight: bold;
}

.trials {
     margin: 0;
	 padding: 0;
	 text-transform: uppercase;
	 float: right;
}
.trials li {
     display: inline-block;
     list-style: none;
	 margin-left: 10px;
}
.trials li {
     max-width: 130px; 
     line-height: 40px;
     height: 40px;
    color:1C1C1C;
background:#D1CFD0;
 

border-radius:10px;
-moz-border-radius:15px; /* Old Firefox */
            
}
.trials li span {
     display: -moz-inline-box; /* FF2 or lower */
     display: inline-block; /* FF3, Opera, Safari */
     line-height: normal;
     vertical-align: middle;
	 text-align: center;
}
.trials li span { 
     *display  : inline; /* haslayout for IE6/7 */
}



.trials li:hover {

  background-color: #9CCC16;
}



















.Main_body .Header .logo h1 {
	color: #5F5F5F;
	font-family: calibri;
	font-size: 45px;
	font-weight:...