JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="master">
<div class="header">
    <ul class="nav">
        <div class="container">
            <li class="n i" id="home">
                <a>Home</a>
            </li>
            <li class="n i" id="products">
                <a>Products</a>
                <ul class="subnav">
                    <li class="sn i" id="carts"><a>Mobile Carts</a></li>
                    <li class="sn i" id="storage"><a>Cart Storage</a></li>
                    <li class="sn i" id="stations"><a>Wall Stations</a></li>
                    <li class="sn i" id="displays"><a>Displays</a></li>
                    <li class="sn i" id="power"><a>Power Systems</a></li>
                    <li class="sn i" id="charging"><a>Charging Stations</a></li>
                    <li class="sn i" id="software"><a>Software</a></li>
                </ul>
            </li>
            <li class="n i" id="company">
                <a>Company</a>
                <ul class="subnav">
                    <li class="sn i" id="news"><a>News</a></li>
                    <li class="sn i" id="events"><a>Events</a></li>
                    <li class="sn i" id="careers"><a>Careers</a></li>
                </ul>
            </li>
            <li class="n i" id="partners">
                <a>Partners</a>
                <ul class="subnav">
                    <li class="sn i" id="cdw"><a>CDW</a></li>
                    <li class="sn i" id="dell"><a>Dell</a></li>
                    <li class="sn i" id="insight"><a>Insight</a></li>
                    <li class="sn i" id="pcconnection"><a>PC Connection</a></li>
                    <li class="sn i" id="pds"><a>PDS</a></li>
                    <li class="sn i" id="synnex"><a>Synnex</a></li>
                    <li class="sn i" id="lpc"><a>Liquid PC</a></li>
                    <li class="sn i" id="moredirect"><a>More Direct</a></li>
                </ul>
            </li>
            <li class="n i" id="support">
                <a>Support</a>
           ...

CSS

body {
    background: #f9f9f9;
    color: #252525; text-shadow: rgba(255,255,255,0.4) 0px 1px 0px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 80%; line-height: 1.4em;
    font-weight: 300;
    -webkit-font-smoothing: subpixel-antialiased;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
    zoom:1;
}

.master {
    min-width: 900px; width: 80%; max-width: 1200px;
    padding: 20px; margin: 0px auto;
}

/********      NAVIGATION      ********/
.nav {
    position: relative;
    height: 3.5em;
    width: 100%;
    margin-bottom: 1.75em;
    z-index: 900;
    border: #a5a5a5 solid 1px;
    background: #efefef;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(50%,#dedede), color-stop(50%,#d8d8d8), color-stop(70%,#d3d3d3), color-stop(100%,#dcdcdc));
    background: -webkit-linear-gradient(top, #efefef 0%,#dedede 50%,#d8d8d8 50%,#d3d3d3 70%,#dcdcdc 100%);
    border-radius: 1.75em;
    box-shadow: inset rgba(255,255,255,0.8) 0px 0px 1px, inset #9e9e9e 0px -2px 0px, inset #FFF 0px 0px 1px, rgba(0,0,0,0.15) 0px 2px 5px, inset rgba(255,255,255,0.5) 0px 0px 2px;
    user-select: none; user-drag: none;   
}
.nav .m {
    display: none;
}

.nav .n.i {
    float: left;
    width: 100px;
    height: 3.5em;
}
.nav .n.i a {
    display: block;
    width: 99px;
    height: 3.5em;
    cursor: pointer;
    border-left: #aaa 1px solid;
    border-left: rgba(0,0,0,0.2) 1px solid;
    box-shadow: inset rgba(255,255,255,0.3) 1px 0px 0px, inset rgba(255,255,255,0.3) -1px 0px 0px;
    text-align: center;
    font-size: 1em;
    line-height: 3.5em;
    text-decoration: none;
    color: #333;
    text-shadow: #FFF 0px 1px 1px;
}
.nav .n.i:nth-child(1) a, .nav .n.i:nth-child(1):hover a {
    border-radius: 1.75em 0em 0em 1.75em;
    border: none; 
    padding-left: 1px;
}
.nav .n.i:last-child...