JSFiddle - React, Tailwind, and code Playground

by Jeremy Lewis

HTML

<nav>
    <nav id="nav_center">
        <ul>
            <li><a href="#">Test Link 1</a>

            </li>
            <li><a href="#">Test Link 2</a>

            </li>
            <li><a href="#">Test Link 3</a>

            </li>
            <li><a href="#">Test Link 4</a>

            </li>
            <li><a href="#">Test Link 5</a>

            </li>
        </ul>
    </nav>
</nav>
<div id="login"> <a href="#">Sign In</a>  <span style="margin:0px 8px 0px 8px ; color:#FFF">|</span><a href="#">Sign Up</a>

    <ul>
        <li>Shop Keepers</li>
        <li>Customers</li>
    </ul>
</div>
<div class="content">
    <p>This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes. This is where all the content goes....

CSS

body {
    background-color: #17aaef;
}
* {
    margin: 0;
    padding: 0;
}
nav {
    width: 100%;
    height: 30px;
    background-color: #000;
    z-index: 1;
}
#nav_center {
    width: 900px;
    margin-left: 20px;
    ;
    margin-right: auto;
}
nav ul {
    list-style: none;
}
nav a {
    display: inline;
    float: left;
    text-decoration: none;
    color: #FFF;
    font-size: 15px;
    font-family:"Times New Roman", Times, serif;
    /*font-weight:bold;*/
    padding: 6px 50px 8px 18px;
}
nav a:hover {
    color: #CCC;
}
#login {
    width: 160px;
    height: 30px;
    float: right;
    background-color:#000;
    margin-right: 10px;
    border-radius:0px 0px 5px 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    text-align:center;
    margin-top: -22px;
    font-size: 16px;
    font-family:"Times New Roman", Times, serif;
    line-height:30px;
}
#login a {
    color: #FFF;
    text-decoration:none;
    text-align:center;
}
#login a:hover {
    color:#CCC;
}
#login ul {
    width:160px;
    height:60px;
    color:#FFF;
    font-size: 16px;
    font-family:"Times New Roman", Times, serif;
    text-decoration:none;
    list-style:none;
    border-radius:0px 0px 5px 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#login ul {
    position:absolute;
    visibility:hidden;
}
#login:hover ul {
    visibility:visible;
}
#login ul li:hover {
    color:#CCC;
    opacity:0.8;
}
#login li {
    border:1px solid #FFF;
    background-color:#000;
}
#login li:last-child {
    border-top:none;
}
.content {
    margin-top: 30px;
    padding: 10px;
}
#footer {
   ...