JSFiddle - React, Tailwind, and code Playground

by Nivedita Gautam

HTML

<body>
    <div id="header">
        <div id="nav-wrapper">
            <!-- Nav -->
            <nav id="nav">
                <ul id="main">
                    <li class="active"><a href="index.html">Homepage</a</li>
                            <li id="l1"><a href="pictures.html">Pictures</a>

                        <ul id="sub">
                            <li>cat1</li>
                            <li>cat2</li>
                            <li>cat3</li>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a>

                    </li>
                </ul>
            </nav>
        </div>
</body>

CSS

ul {
    text-decoration:none;
}
li {
    background:#FFF;
    float:left;
    display:inline;
    width:100px;
    height:30px;
    color:#000;
    text-align:center;
    padding:5px;
}
#sub {
    display:none;
}
#l1:hover {
    color:#0F0;
    cursor:pointer;
}
#l1:hover > #sub {
    display:block;
    position: relative;
    left:-23px;
    top:-15px;
    opacity:0.8;
}
#l1:hover > #sub li {
    background:#FFF;
}
#nav {
}
#nav-wrapper {
    background: rgba(0, 0, 0, .1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#nav > ul {
    margin: 0;
    padding: 0;
    text-align: center;
}
#nav > ul > li {
    display: inline-block;
    border-right: 1px solid;
    border-color: rgba(255, 255, 255, .1);
}
#nav > ul > li:last-child {
    padding-right: 0;
    border-right: none;
}
#nav > ul > li > a, #nav > ul > li > span {
    display: inline-block;
    padding: 1.5em 1.5em;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
    outline: 0;
    color: #FFF;
}
#nav li.active a {
    color: #FFF;
}
#nav > ul > li > ul {
    display: none;
}
#nav li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
body {
    background:#000;
}
}#nav {
}
#nav-wrapper {
    background: rgba(0, 0, 0, .1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#nav > ul {
    margin: 0;
    padding: 0;
    text-align: center;
}
#nav > ul > li {
    display: inline-block;
    border-right: 1px solid;
    border-color: rgba(255, 255, 255, .1);
}
#nav > ul > li:last-child {
    padding-right: 0;
    border-right: none;
}
#nav > ul > li > a, #nav > ul > li > span {
    display: inline-block;
    padding: 1.5em 1.5em;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
    outline: 0;
    color: #FFF;
}
#nav li.active a {
    color: #FFF;
}
#nav > ul > li > ul {
    display: none;
}
#nav li:hover > ul {
    opacity: 1;
   ...