JSFiddle - React, Tailwind, and code Playground

by Mekong

HTML

<div id="top-bar">
	<div id="top-bar-content">
    	<div id="ph-contact"><span style="padding-right:5px;"><i class="fa fa-phone"></i></span>9876 1234 | <span style="padding-right:5px;"><i class="fa fa-envelope-o"></i></span>[email protected]</div>
        <div id="social-icons">
    		<i class="fa fa-facebook"></i>
    		<i class="fa fa-twitter"></i>
    		<i class="fa fa-google-plus"></i>
        </div>
    </div>
</div>
<header>
	<div id="header-content">
    	<div id="logo"><img src="http://placehold.it/290x133">            </div>
        <div id="nav">
        	<ul>
            	<li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Contact</a></li>
            
            </ul>
         </div>
    </div>
</header>

<div style="width:100%; height:1000px;"></div>

CSS

body{
	margin:0;
	padding:0;
	border:none;
	font-family: 'Open Sans', sans-serif;
	overflow:hidden;
}

#top-bar{
	width:100%;
	height:50px;
	display:block;
	/*background-color:rgba(255, 0, 0, 0.1);*/
	border-bottom:1px solid rgba(255, 153, 255, 0.1);
}

#top-bar-content{
	width:980px;
	margin-left:auto;
	margin-right:auto;
	padding-top:15px;
	padding-right:10px;
}

#ph-contact{
	float:left;
	font-size:14px;
	color:#F9F;
	display:block;
}

#social-icons{
	display:block;
	float:right;
}

#social-icons i{
	font-size:16px;
	margin-right:10px;
	color:#F9F;
}

header{
	width:100%;
	height:200px;
	background-color:#F9F;
	
}

#header-content{
	width:980px;
	margin-left:auto;
	margin-right:auto;
}


#logo{
	float:left;
	padding-top:25px;
}

#nav{
	float:right;
	padding-top:65px;
}

#nav ul{
	margin:0;
	padding:0;
	list-style-type:none;
}

#nav ul li{
	display:inline;
	margin-right:10px;
}

#nav ul li a:link{
	color:#fff;
	font-size:16px;
	text-transform:uppercase;
	text-decoration:none;
	
}



/* MEDIA QUERIES */

@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

#top-bar{
	display:none;
}

#top-bar-content{
	display:none !important;
}

#social-icons{
	display:none !important;
	float:none;
}

#ph-contact{
	display:none !important;

}

#nav{
	display:none !important;
}

#nav ul{
	display:none !important;
}

#nav ul li{
	display:none !important;
}

#nav ul li a:link{
	display:none !important;
	
}

}


/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}