JSFiddle - React, Tailwind, and code Playground

by bingles

HTML

<ol class="simple-tabs">
    <li><a href="#">Home</a></li>
    <li class="deep"><a href="#">Dashboard</a>
        <ul class="simple-tabs-deep"> 
          <li><a href="#">Sub Menu 1</a>              
          <li><a href="#">Sub Menu 2</a>  
        </ul>
    </li>
    <li><a class="meh" href="#">Meh</a></li>
    <li><a href="#">Logo</a></li>
</ol>

CSS

body {
    min-height: 500px;
    padding: 0;
    margin: 0;
    background-color: #ccc;
}

.simple-tabs, .simple-crumbs {
    margin: 0 -30px 20px -30px;
    padding: 0 30px;
}
.simple-tabs.inline {
    margin-left: 0;
    margin-right: 0;
}
.simple-tabs:after, .simple-crumbs:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
.simple-tabs li, .simple-crumbs li {
    float: left;
    margin: 0 3px 0 0;
}
.simple-tabs li a, .simple-tabs li label {
    background: #f2f2f2;
    border: 1px solid #f0f0f0;
    border-bottom-color: #e8e8e8;
    color: #888;
    cursor: pointer;
    display: block;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 9px 2px 9px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    top: 6px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
}
.simple-tabs li a:hover, .simple-tabs li.deep-hover a, .simple-tabs li.deep-hover a:hover, .simple-tabs li label:hover {
    background-color: #e8e8e8;
    border-color: #e2e2e2;
    color: #666;
    padding-bottom: 3px;
    top: 5px;
}
.simple-tabs li.external-tab a {
    background-position: right top;
    background-repeat: no-repeat;
}
.simple-tabs li.current a, .simple-tabs li.deep-hover.current a, .simple-tabs li.current label {
    background-color: #fff;
    border: 1px solid #eee;
    border-bottom: none;
    color: #484848;
    cursor: default;
    font-size: 12px;
    margin: 0 1px;
    padding: 7px 0 6px 0;
    top: 1px;
    background-image: -moz-linear-gradient(top, #f8f8f8, #fff);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #fff));
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8', EndColorStr='#ffffff')";*/
}
.simple-tabs li:first-child.current a, .simple-tabs li:first-child.current label {...

JavaScript

var submenu = document.getElementsByTagName('a')[0];

if ("ontouchstart" in window) {
    submenu.ontouchstart = function() {
        $(".simple-tabs li.deep").addClass("deep-hover");
    };
    submenu.ontouchend = function() {
        $(".simple-tabs li.deep").removeClass("deep-hover");
    };
}
else {
    $(".simple-tabs li.deep").hover(

    function() {
        $(this).addClass("deep-hover");
    }, function() {
        $(this).removeClass("deep-hover");
    });
    $(".simple-tabs.live li").each(function(i) {
        var parent = $(this);

        if ($(this).hasClass("current")) {
            $(".simple-tab-" + i).fadeIn("fast");
        }
        $(this).find("a").click(function() {
            parent.parent().find("li").removeClass("current");
            parent.addClass("current");
            $(".simple-tab").hide();
            $(".simple-tab-" + i).show();
            return false;
        });
    });
}