JSFiddle - React, Tailwind, and code Playground

by gnossienne

HTML

<div id="menu-bar">
    <div class="tabs"> <span>Tab1</span>

    </div>
    <div class="tabs"> <span>Tab2</span>

    </div>
    <div class="tabs"> <span>Tab3</span>

    </div>
    <div class="tabs"> <span>Tab4</span>

    </div>
    <div class="tabs"> <span>Tab5</span>

    </div>
</div>

CSS

#menu-bar {
    background-color: gray;
    height: 30px;
    min-width: 100px;
    max-width: 280px;
    display: none;
}
.tabs {
    color: white;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    opacity: 0.5;
}
.tabs:hover {
    cursor: pointer;
    opacity: 1.0;
}

JavaScript

$(document).ready(function () {
    options = {}
    $("#menu-bar").show("slide", options, 1000);
});