JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<ul class="main-nav">
    <li>
        <a href="#!">Main Link</a>
        <div class="main-nav__sub">
            <div>
                <span class="main-nav__sub__title">Title 1</span>
                <ul>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                </ul>
            </div>
            <div>
                <span class="sub-nav-title">Title</span>
                <ul>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                </ul>
            </div>
            <div>
                <span class="sub-nav-title">Title</span>
                <ul>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li>
        <a href="#!">Main Link</a>
        <div class="main-nav__sub">
            <div>
                <span class="sub-nav-title">Title 2</span>
                <ul>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                </ul>
            </div>
            <div>
                <span class="sub-nav-title">Title</span>
                <ul>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                    <li><a href="#!">Sub link</a></li>
                </ul>
           ...

SCSS

*{
    box-sizing: border-box;
}

.main-nav{
    display: block;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    &:after{
        content: '';
        clear: both;
        display: table;
    }
    &,ul{
        padding: 0;
    }
    li{
        list-style-type: none;
    }
    & > li{
        float: left;
        & > a{
            display: block;
            background-color: #fff;
            padding: 5px 8px;
            transition: background-color 300ms;
        }
        & > div{
            visibility: hidden;
            opacity: 0;
            transition: visibility 300ms, opacity 300ms;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
        }
        &:hover{
            & > a{
                background-color: #eee;
            }
            & > div{
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

.main-nav__sub{
    background-color: #eee;
    padding: 5px 8px;
    &:after{
        content: '';
        clear: both;
        display: table;
    }
    & > div{
        float: left;
        width: 25%;
    }
}

JavaScript

/**
 * Category Nav
 */