JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<ul class="tabs">
    <li class="selected">Foo</li>
    <li>Bar</li>
    <li>Dog</li>
</ul>
<button id="theme-switch">Switch theme</button>

CSS

.tabs li {
   border-left:1px solid transparent;
   border-image:linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
    display: block;
    padding: 10px;
    margin: 5px;
    background: #aaa;
}

/* .tabs::-moz-selection {background:none}
.tabs {width:300px;height:30px;display:flex;background-color:#343C45;color:white;font:menu;border-bottom:1px solid black;margin:0;padding:0;-moz-user-select:none;}
.tabs li {height:100%;display:inline-block;border-left:1px solid transparent;flex:1;text-align:center;line-height:30px;}
.tabs li:not(.selected) {
   border-image:linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
}
.tabs li:hover {
    background-color:hsla(206,37%,4%,.2)
}
.tabs li:first-child {border-left:none;}

.tabs li.selected {background-color:#1D4F73;border-image:linear-gradient(#2d5b7d, #2d5b7d) 1 1;border-right:1px solid transparent;}
.tabs li.selected + li {border-left:none;}
.tabs li.selected:hover {background-color:#274f64;}
.tabs li.selected:hover:active {background-color:#1f3e4f}
 */
/* ----- Light theme ----- */
.theme-light .tabs {
    background-color:#F0F1F2;
    color: black;
    border-color:#D9D9D9;
}
.theme-light .tabs li {
    border-image:linear-gradient(transparent 15%, red 15%, red 85%, transparent 85%) 1 1;  
}
.theme-light .tabs li:hover {
    background-color:rgba(0,0,0,0.1)
}
.theme-light .tabs li.selected {
    background-color:#4C9ED9 !important;
    color:white;
    border-image:none;
}

JavaScript

$(function() {
    $(".tabs li").mousedown(function(e) {
        $(this).siblings("li").removeClass("selected");
        $(this).addClass("selected");
    });
    $("#theme-switch").click(function() {
        $("body").toggleClass("theme-light");
    });
});