JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
	 <!---start-container---->
	 <div class="container">
				<!---start-top-header---->
				<div class="top-header">
					<div class="top-header-left">
						<p>naME</p>
						<p>COMPANY</p>
					</div>
					<div class="top-header-right">
						<div class="top-header-contact-info">
							<p>GET FREE CONSULTATION:</p>
							<span>1 800 123 1234</span>
						</div>
						<div class="top-header-contact-account">
							<div class="social">
								<ul>
									<li><a href="#"><i class="facebook"></i></a></li>
									<li><a href="#"><i class="twitter"></i></a></li>
									<li><a href="#"><i class="dribble"></i></a></li>	
									<li><a href="#"><i class="google"></i></a></li>										
								</ul>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<!---End-top-header---->
				<!----start-main-header----->
				<div class="main-header">
					<div class="logo">
						<a href="index.html"><img src="images/logo2.png" title="logo" /></a>
					</div>
					<div class="top-nav">

					<span class="menu"></span>
						<ul>
							<li class="active"><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="projects.html">Mission</a></li>
			            
                            </li>
                       		<li><a href="blog.html">Blog</a></li>
							<li><a href="contact.html">Contact</a></li>
							<div class="clearfix"> </div>
						</ul>
					</div>
					<div class="clearfix"> </div>
					</div>
					<div class="grid_12">
					  <img src="images/clr.jpg" class="img-responsive">
					</div>
			  <!-- script-for-menu -->
		 <script>
				$("span.menu").click(function(){
					$(".top-nav ul").slideToggle("slow" , function(){
					});
				});
		 </script>
		 <!-- script-for-menu -->	 
			
					
	 </div>
	<!----End-main-header----->
</div>

CSS

/*=============================================
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
================================================*/
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clearfix{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
	font-family: 'Raleway', sans-serif;
	background: #fff;
}
body a{
	transition: 0.5s all ease;
  -webkit-transition: 0.5s all ease;
  -moz-transition: 0.5s all ease;
  -o-transition: 0.5s all...