JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<header>
            
            <nav id="access" role="navigation">
            <div class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="/wordpress/?page_id=13">VIP Account</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="/wordpress/?page_id=11">Contact Us</a>

<ul class="sub-menu">
    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="/wordpress/?page_id=15">The JBD Experience</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="http://#">Sub Menu Three</a></li>
    <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="http://#">Sub Menu Four</a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="http://#">Sub Menu Five</a></li>
    <li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="http://#">Sub Menu Six</a></li>
</ul>

</li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="/wordpress/?page_id=9">Other Services</a>
<ul class="sub-menu">
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="/wordpress/?page_id=24">Sub Menu Page Two</a></li>
    <li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46"><a href="/wordpress/?cat=5">Fleet</a></li>
</ul>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="/wordpress/?page_id=5">About Us</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a...

CSS

body {
 background:black;   
}
#access {
    width:100%;
    float:left;
    border-bottom:1px solid #B9B9B9;
    margin-bottom:0;
    -webkit-box-shadow: 0px 2px 0px 2px #a3a3a3;
    -moz-box-shadow: 0px 2px 0px 2px #a3a3a3;
    box-shadow: 0px 2px 0px 2px #a3a3a3;
    text-transform:uppercase;
}

.menu {
    width:960px;
    margin:0 auto;
}

.menu-top-menu-container {
    width:960px;
    margin:0 auto;
}

#access ul li {
    width:192px;
    float:left;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;    
}

#access ul li:hover {
    -webkit-box-shadow: inset 0px 0px 5px 3px #a8a8a8;
    -moz-box-shadow: inset 0px 0px 5px 3px #a8a8a8;
    box-shadow: inset 0px 0px 5px 3px #a8a8a8;
}

#access ul li a {
    text-decoration:none;
    text-align:center;
    letter-spacing: 0.1em;
    font-size:14px;
    color:#666;
    padding-top:16px;
    padding-bottom:16px;
    display:block;
    font-family: 'Museo300', sans-serif;
}

#access ul li a:hover {
    color:#000;
}

#access ul li .sub-menu {
    -moz-transition:0.1s all;
    -webkit-transition:0.1s all;
    -o-transition:0.1s all;
    width:960px;
    position:absolute;
    margin-top:0;
    visibility:hidden;
    z-index:998;
    top:50px;
    margin:0 auto;
    border-top:1px solid #e0e0e0;
    border-bottom:1px solid #999;
    padding:5px;
    background: #d1d1d1;
    background: -moz-linear-gradient(top, #d1d1d1 0%, #e2e2e2 24%, #fefefe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1d1d1), color-stop(24%,#e2e2e2), color-stop(100%,#fefefe));
    background: -webkit-linear-gradient(top, #d1d1d1 0%,#e2e2e2 24%,#fefefe 100%);
    background: -o-linear-gradient(top, #d1d1d1 0%,#e2e2e2 24%,#fefefe 100%);
   ...