JSFiddle - React, Tailwind, and code Playground

by raman

HTML

<ul id='nav'>
                    
<li><a href='#home'>HOME</a>
</li>

<li><a href='#tutorials'>TUTORIALS</a>
</li>
    
<li><a href='#resources'>RESOURCES</a>
</li>
    <li><a href='#inspiration'>INSPIRATION</a>
</li>
    <li><a href='#downloads'>DOWNLOADS</a>
</li>
<li><a href='#wordpress'>WORDPRESS</a>
</li>
<li><a href='#contact-us'>CONTACT-US</a>
</li>
<li><a href='#advertise'>ADVERTISE</a>
</li>

            </ul>

CSS

#nav {
    margin: 0 0 0px 0px;
    background: -moz-linear-gradient(bottom, #8a0a09,#ee0000);
background: -webkit-gradient(linear, center bottom, center top, from(#8a0a09), to(#ee0000));
background-color: #d10d0d;
}
#nav, #nav ul {
    padding: 0;
    float: left;
    list-style: none;
}
#nav {
    padding: 0;
    font-size: 14px;
    float: left;
    width: 1050px;
    border-top: 2px solid #ee0000;border-bottom: 2px solid #8a0a09;
        font-family: arial;
}
#nav a {
        color: #ffffff;
        font-weight: bold;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
    border-right:0px solid #DDD;
        }
#nav li {
        color:#666666;
    float: left;
    line-height: 30px;
}
#nav li a:hover {
    color:#8a0a09 ;
    text-decoration: none;
    font-weight:none;
        background: white;
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 14px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 14px;
border-top-left-radius: 14px 14px;
border-top-right-radius: 0px 0px;
border-bottom-left-radius: 0px 0px;
border-bottom-right-radius: 14px 14px;
}
       
#nav li ul {
    position: absolute; backgound: #000000;
    width: 15em;
    left: -999em;
    z-index: 99999;
}
#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    z-index: 1000;
}
#nav li ul li {
    background: #8a0a09;
    border-bottom: 1px solid #ffffff; border-top: #d10d0d;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
        line-height: 28px;
    width: 15em;
}
#nav li:hover, #nav li.hover {
    position: static;
}
#nav li ul ul {
    margin: -29px 0 0 15em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
 ...