JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav" role="navigation">
    <ul class="clearfix">
        <li> <a href="?work"><span>Technology</span></a>
            <ul>
                <li><a href="#">Hot news</a></li>
                <li><a href="#">Sad news</a></li>
                <li><a href="#">Normal news</a></li>
                <li><a href="?webdesign">Web Design</a>

                    <ul>
                        <li><a href="#">Super power</a>
                        </li>
                        <li><a href="#">Aim Gain</a>
                        </li>
                        <li><a href="#">Acheivers</a>
                        </li>
                        <li><a href="#">Lackers</a></li>
                    </ul>
                </li>
                <li><a href="?typography">Typography</a>
                </li>
                <li><a href="?frontend">Front-End</a>
                </li>
            </ul>
        </li>
        <li><a href="?about">Personal Stuff</a>
        </li>
    </ul>
</nav>

CSS

li{
    list-style:none;
}
a{
    text-decoration:none;
}
#nav
        {
            width: 100%;/*60em; /* 1000 */
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            position: absolute;
        }

        #nav > a
        {
            display: none;
        }

        #nav li
        {
            position: relative;
            z-index:5;
        }
        #nav li a
        {
            color: #fff;
            display: block;
        }
        #nav li a:active
        {
            background-color: #c00 !important;
        }

        #nav span:after
        {
            width: 0;
            height: 0;
            border: 0.313em solid transparent; /* 5 */
            border-bottom: none;
            border-top-color: #efa585;
            content: '';
            vertical-align: middle;
            display: inline-block;
            position: relative;
            right: -0.313em; /* 5 */
        }

        /* first level */

        #nav > ul
        {
            height: 3.75em; /* 60 */
            background-color: #e15a1f;
        }
        #nav > ul > li
        {
            /*width: 20%;     /*Change to accommodate more categories*/
            height: 100%;
            float: left;
        }
        #nav > ul > li > a
        {
            padding:0 40px;
            height: 100%;
            font-size: 1.5em; /* 24 */
            line-height: 2.5em; /* 60 (24) */
            text-align: center;
        }
        #nav > ul > li:not(:last-child) > a
        {
            border-right: 1px solid #cc470d;
        }
        #nav > ul > li:hover > a,
        #nav > ul:not(:hover) > li.active > a
        {
            background-color: #cc470d;
        }


        /* second level */

        #nav li > ul
        {
            background-color: #cc470d;
            display: none;
            position: absolute;
            top: 100%;
            width:500px;
        }
        #nav li:hover > ul
        {
         ...