JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul id="nav">
        <li>
            <a href="#" title="Return home">Home</a>
        </li>
        <li>
            <a href="#" title="About the company">About</a>
            <ul>
                <li><a href="#">The product</a></li>
                <li><a href="#">Meet the team</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="The services we offer">Services</a>
            <ul>
                <li><a href="#">Sevice one</a></li>
                <li><a href="#">Sevice two</a></li>
                <li><a href="#">Sevice three</a></li>
                <li><a href="#">Sevice four</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="Our product range">Product</a>
            <ul>
                <li><a href="#">Small product (one)</a></li>
                <li><a href="#">Small product (two)</a></li>
                <li><a href="#">Small product (three)</a></li>
                <li><a href="#">Small product (four)</a></li>
                <li><a href="#">Big product (five)</a></li>
                <li><a href="#">Big product (six)</a></li>
                <li><a href="#">Big product (seven)</a></li>
                <li><a href="#">Big product (eight)</a></li>
                <li><a href="#">Enourmous product (nine)</a></li>
                <li><a href="#">Enourmous product (ten)</a></li>
                <li><a href="#">Enourmous product (eleven)</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="Get in touch with us">Contact</a>
            <ul>
                <li><a href="#">Out-of-hours</a></li>
                <li><a href="#">Directions</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

/*------------------------------------*\
    RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{
    border:0;
}
address,caption,cite,code,dfn,th,var{
    font-style:normal;
    font-weight:normal;
}
caption,th{
    text-align:left;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}





/*------------------------------------*\
    MAIN
\*------------------------------------*/
html{
    height:101%;
    background:#fff url(/img/css/bg.gif) top left repeat-x;
}
body{
    font-family:Arial,Verdana,sans-serif;
    font-size:0.75em;
    color:#333;
    margin:0 auto;
    padding:10px;
}





/*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    /* Clear floats */
    float:left;
    margin-left: 30%;
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    margin-right: 0;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than...