JSFiddle - React, Tailwind, and code Playground

by vend3tta

HTML

<ul class="b-menu">
    <li class="b-menu__item">
        <a href="#" class="b-menu__item-title">Item #1</a>
        <ul class="b-submenu">
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #1</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #2</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #3</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #4</a></li>
        </ul>
    </li>
    <li class="b-menu__item">
        <a href="#" class="b-menu__item-title">Item #2</a>
        <ul class="b-submenu">
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #1</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #2</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #3</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #4</a></li>
        </ul>
    </li>
    <li class="b-menu__item">
        <a href="#" class="b-menu__item-title">Item #3</a>
        <ul class="b-submenu">
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #1</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #2</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #3</a></li>
            <li class="b-submenu__item"><a href="#" class="b-submenu__item-title">Submenu Item #4</a></li>
        </ul>
    </li>
</ul>

CSS

* {
    margin: 0;
    padding: 0
    }
body {
    font-family: tahoma;
    font-size: 1em;
    color: #444
    }
a {
    font: inherit;
    color: #1561d9
    }
ul, li {
    list-style: none
    }
.b-menu {
    border: 1px solid #ccc;
    border-radius: 4px
    }
.b-menu__item {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #ccc