JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<nav>
    <ul class="v-menu">
        <li class="v-menu-item">
            <label class="v-menu-item-label">File</label>
            <ol class="v-submenu">
                <li class="v-submenu-item">
                    <span class="v-submenu-indicator">►</span>
                    <a class="v-submenu-item-label" href="#">New</a></li>
                    <ol class="v-submenu-sublevel">
                        <li class="v-submenu-sublevel-item"><a class="v-submenu-sublevel-item-label" href="#">New Project</a></li>
                        <li class="v-submenu-sublevel-item"><a class="v-submenu-sublevel-item-label" href="#">New File</a></li>
                        <li class="v-submenu-sublevel-item"><a class="v-submenu-sublevel-item-label" href="#">New Folder</a></li>
                    </ol>
                <li class="v-submenu-item"><a class="v-submenu-item-label" href="#">Open</a></li>
                <li class="v-submenu-separator"><span>---</span></li>
                <li class="v-submenu-item"><a class="v-submenu-item-label" href="#">Save</a></li>
                <li class="v-submenu-separator"><span>---</span></li>
                <li class="v-submenu-item"><a class="v-submenu-item-label" href="#">Exit</a></li>
            </ol>
        </li>
        <li class="v-menu-item">
            <label class="v-menu-item-label">Settings</label>
            <ol class="v-submenu">
                <li class="v-submenu-item"><a class="v-submenu-item-label" href="#">Allow Settings to be changed</a></li>
                <li class="v-submenu-item"><a class="v-submenu-item-label" href="#">Subscribe to email notifications</a></li>
                <li class="v-submenu-item"><a class="v-submenu-item-label" href="#">Activate Session cookies</a></li>
                <li class="v-submenu-separator"><span>---</span></li>
                <li class="v-submenu-item"><a class="v-submenu-item-label" href="#">Manage Settings</a></li>
            </ol>
        </li>
        <li...

CSS

.v-menu {
    height: 23px;
    background: #323336 repeat-x;
    color: #D1D3D6;
    text-shadow: rgba(0, 0, 0, .9) 0 1px 0;
    padding: 0 8px;
    float: left;
    white-space: nowrap;
}
.v-menu-item {
    display: inline-block;
    position: relative;
    cursor: default;
    vertical-align: top;
    zoom: 1;
    padding: 3px 8px;
    height: 17px;
    line-height: normal;
}
.v-menu-item:hover {
    color: white; 
}
.v-menu-item:hover .v-submenu {
    display: block;
}
.v-submenu-item:hover .v-submenu-sublevel {
    display: block;
}
.v-menu-item-label {
    color: #D1D3D6;
    text-shadow: rgba(0, 0, 0, .9) 0 1px 0;
    white-space: nowrap;
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
    font-size: 12px;
}
.v-menu .v-submenu {
    display: none;
    position: absolute;
    top: 23px;
    left: 0;
    background: #F8F8F9;
    border: 1px solid #aaa;
    overflow: visible;
    padding: 4px 0;
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
    font-size: 12px;
    line-height: normal;
    color: #222;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.v-menu .v-submenu-item,
.v-menu .v-submenu-sublevel-item {
    padding: 1px 26px 1px 10px;
    line-height: 16px;
    cursor: pointer;
    display: block;
    position: relative;
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
    font-size: 12px;
    line-height: normal;
    color: #222;
    text-shadow: none;
}
.v-menu .v-submenu-item:hover,
.v-menu .v-submenu-sublevel-item:hover {
    color: #fff;
    text-shadow: 0 1px 0 #3B5A7A;
    background: #4D749F repeat-x;
}
.v-menu .v-submenu-item-label,
.v-menu .v-submenu-sublevel-item-label{
    display: block;
    white-space: nowrap;
    line-height: 16px;
    text-decoration: none;
    color: inherit;
}
.v-menu .v-submenu-sublevel {
    display: none;
    position: absolute;
    top: 0;
    right: -104px;
    background: #F8F8F9;
    border: 1px solid #aaa;
    padding: 4px 0;
    font-family: Arial, Helvetica,...