JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<nav>
    <div class="topcols">
        <ul class="top">
            <li>ITEM A1</li>
            <li>ITEM A2</li>
            <li>ITEM A3</li>
        </ul>
        <ul class="top">
            <li>ITEM B1</li>
            <li>
                ITEM B2
                <ul>
                    <li>ITEM b1</li>
                    <li>ITEM b2</li>
                    <li>ITEM b2</li>
                </ul>
            </li>
            <li>ITEM B2</li>
        </ul>
    </div>
    <div class="topcols">
        <ul class="top">
            <li>ITEM C1</li>
            <li>ITEM C2</li>
            <li>
                ITEM C3
                <ul>
                    <li>ITEM c1</li>
                    <li>ITEM c2</li>
                    <li>ITEM c3</li>
                </ul>
            </li>
        </ul>
        <ul class="top">
            <li>ITEM D1</li>
            <li>ITEM D2</li>
            <li>ITEM D3</li>
        </ul>
    </div>
    <div class="topcols">
        <ul class="top">
            <li>ITEM E1</li>
            <li>ITEM E2</li>
            <li>ITEM E3</li>
        </ul>
    </div>
</nav>

CSS

nav {
    background: yellow;
    overflow: hidden;
}

ul.top {
    background: red;
    //float: left;
    //width: 20%;
}
div {
    background: green;
    overflow: hidden;
    width: 33.3%;
    float: left;
}