JSFiddle - React, Tailwind, and code Playground

by mojtaba

HTML

<body>
    <form id="form1" runat="server">
<div id="wrapper">
       <!-- Navbar
    ================================================== -->
<div id="nav">
     <ul> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Crawler</a></li>
          <li><a href="#">Visual Analytics</a>
          </li> 
     </ul> 
</div>
</div> 
    </form>
</body>

CSS

body {
    background-image:url('../images/subtle_grunge.png');
background-repeat:repeat;
   margin: 0;
}

#wrapper {
    margin: 0 auto;
    width: 1000px;
    height:100%;
    text-align: left;
}

#nav {
list-style:none;
font-weight:bold;
margin-bottom:10px;
height:60px;
width:100%;
background-color:#b11d1d;
text-align: center;
opacity:0.5;
}
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block;
}
#nav li {
margin:0px;
display:inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color:#b11d1d;
float:left
}

#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b; }