JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div class="nav">
    <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
    </ul>
</div>

<div class="main">

<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>
<p>ABC ABC ABC</p>

</div>

CSS

.wrapper {
    background-color: red; 
    width: 960px; 
    margin: 0 auto; 
}
.nav {
    margin: 0 0 1em 0;
    width: 960px;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
}
.nav ul {
    list-style: none; 
    margin: 0 auto;
    padding: 0; 
}
.nav ul li {
    text-align: center;    
}
.nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; 
}
.nav li:first-child a {
    border-left: 1px solid #ccc; 
}
.nav li a:hover {
    color: #c00;
    background-color: #fff; 
}
.main {
   width: 960px;   
}