JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<body>
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    
        
        <div id = "header">
            <img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
			--><div id ="nav_bar">
				<ul class="nav">
					<li class= "nav"><a href="#">Home</a></li>
					<li class= "nav"><a href="#">Our Products</a></li>
					<li class= "nav"><a href="#">Categories</a></li>
					<li class= "nav"><a href="#">About Us</a></li>
					<li class= "nav"><a href="#">Contact Us</a></li>
				</ul>
			</div>
        </div>
</body>

CSS

html {
    min-height: 100%;
}

body {
	background-color: #FFFFCC;
	margin-bottom: 55px;
	text-align: center;
}


div#header{
	background-color: #961701;
	border-bottom: 3px solid #000000;
	display:inline-block;
	width: 100%;
}

img{
	vertical-align: bottom;
}

div#nav_bar{
	display: inline-block;
}

.nav li { 
	display: inline-block;
	list-style-type: none;
}

.nav ul, a { 
	background: #961701; 
	color: white;
	font-family: Arial, Helvetica, sans-serif; 
	padding: 10px 20px;
	text-decoration: none;
}

.nav a:hover { 
	background: #CB4B34; 
}