JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="page">

<!-- ================    Nav Section ======================-->

<div class="nav">
<div class="navcontain">
                        			
    <div class="logo">
        <a href="#">Logo Design</a>
    </div><!-- Logo --> 
                        
<div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a> 
    <ul> 
                                                                		      
  <li><a href="#">Web Design</a></li>                                                                     
  <li><a href="#">Graphic Design</a></li>                                                                               
  <li><a href="#">Ecommerce Design</a></li>                                                                   
  <li><a href="#">Brochure Design</a></li>
</ul> 
     </li> 
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact Us</a></li>
 </ul>
     </div><!-- Menu ---> 
</div><!-- nav contain --> 
</div><!-- nav ---> 

														
<!-- ==========    Hero Image Section   ===================-->
                                                        

						<div class="hero">
                        			<div class="herocontain">
                                    			<div class="herored">
                                                		<p>Best Web Designing Company In India</p>
                                                        		<img src="img/man.png" alt="man">
                                                </div><!-- Hero Red --> 
                                    </div><!-- Hero Contain --> 
                        </div><!-- Hero --> 



										<!-- ======================================    Four Block Section ==================================-->
                                        
                                  <div class="four">
                                  			<div...

CSS

@charset "utf-8";
/* CSS Document */

body {
	font-family: 'Droid Serif', serif;
	margin: 0; 
	padding: 0; 
}

.page {
	width: 100%; 
	margin: 0; 
	padding: 0; 
}



/*    ================ Nav =============================== */ 

.nav {
	width: 100%; 
	padding: 0; 
	margin: 0; 
	background: #ECF0F1;
}

.navcontain {
	width: 1270px; 
	padding: 0; 
	margin: 0 auto; 
	overflow: hidden;
}

.logo {
	display: block; 
	width: 300px;
	float: left;  
}

.logo a {
	display: inline-block; 
	text-decoration: none; 
	color: #353535; 
	font-size: 36px; 
	font-weight: 900; 
	letter-spacing: -1.1px; 
	padding: 15px 0px;
}

.menu {
	padding: 0; 
	margin: 0; 
	width: 900px;
	float: left; 
}

.menu ul {
	padding: 0; 
	margin: 0; 
	float: right; 
	margin-top: 10px;
}

.menu ul li {
	display: inline-block; 
	float: left; 
	list-style: none; 
	margin-left: 20px;
}

.menu ul li:hover {
	border-top: 2px solid #2980B9; 
}

.menu ul li a {
	display: inline-block; 
	color: #313131; 
	text-decoration: none;  
	padding: 10px 15px;
	text-transform: uppercase;
	font-size: 15px;
}

.menu ul ul {
	position: absolute; 
	left: -9999px; 
}

.menu ul li:hover ul {
	left: auto;
}

.menu ul li ul li {
	float: none; 
	display: block; 
	margin-left: 0px;
}

.menu ul li ul li a {
	display: inline-block; 
	padding: 8px 15px;
	text-transform: uppercase; 
	font-size: 15px;
}