JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div class="container">
    <div class="menu_indicator"> <span class="menu_dot"></span>
 <span class="menu_dot"></span>
 <span class="menu_dot"></span>

    </div>
    <div class="menu"> <span class="first_button_set">
            <button class="left_scroll_button"></button>
            <button class="menu_button menu_button_1">1</button>
            <button class="menu_button menu_button_2">2</button>
            <button class="menu_button menu_button_3">3</button>
            <button class="menu_button menu_button_4">4</button>
            <button class="right_scroll_button"></button>
        </span>
 <span class="second_button_set">
            <button class="left_scroll_button"></button>
            <button class="menu_button menu_button_5">5</button>
            <button class="menu_button menu_button_6">6</button>
            <button class="menu_button menu_button_7">7</button>
            <button class="menu_button menu_button_8">8</button>
            <button class="right_scroll_button"></button>
        </span>
 <span class="third_button_set">
            <button class="menu_button menu_button_mark">Mark</button>
            <button class="menu_button menu_button_send">Send</button>
            <button class="menu_button menu_button_7">7</button>
            <button class="menu_button menu_button_8">8</button>
        </span>

    </div> <span class="col left">
        <div class="elem running">
            <div class="info_element name" ></div>
            <span class="info_element status_1" ></span>
 <span class="info_element status_1"></span>

    <div class="info_element name"></div>
    <div class="info_element name"></div> <span class="info_element bar"></span>

    <div class="fully_expanded_information">
        <div class="info_element name"></div> <span class="info_element status_1"></span>
 <span class="info_element status_1"></span>
 <span class="info_element bar"></span>

        <div class="info_element name"></div> <span class="info_element...

CSS

.container {
    position: absolute;
    background-color: black;
    height: 410px;
    width: 330px;
    overflow: hidden;
    white-space:nowrap;
}
.menu {
    position: absolute;
    box-sizing:border-box;
    width: 100%;
    height: 60px;
    top: -30px;
    background-color: #405251;
    transition: all .5s ease;
    z-index: 2;
    padding: 0px 18%;
}
.menu_button_1{
    background-color: #aabac8;
}
.menu_button_2{
    background-color: #04990c;
}
.menu_button_3{
    background-color: #ff9500;
}
.menu_button_4{
    background-color: #b8c255;
}
.menu_button_5{
    background-color: #349ff3;
}
.menu_button_6{
    background-color: #c0331b;
}
.menu_button_7{
    background-color: #0dbd5f;
}
.menu_button_8{
    background-color: #afafd3;
}
.menu_button{
    border: 5px solid black;
    color: white;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 16px;
    font-weight:600;
    text-align: center;
}
.menu_button_mark{
    font-size: 12px;
    font-weight:400;
    background-color: #349ff3;
}
.mark_clicked{
    background-color: #ffffff;
    color: #349ff3;
}
.menu_button_send{
    font-size: 12px;
    font-weight:400;
    background-color: #f33d1a;
}

button {
    height: 45px;
    border-radius: 10px;
    width: 45px;
    margin: 5px 2px;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0s, opacity 1s linear;
    z-index: 3;
}
.left_scroll_button {
    position: absolute;
    width: 2px;
    left: 0px;
    border: none;
}
.right_scroll_button {
    position: absolute;
    width: 2px;
    right: 0px;
    border: none;
}
.expanded_menu {
    top: 0px;
    z-index: 10;
}
.col {
    position: absolute;
    display: inline-block;
    transition: all 1s ease;
    top: 30px;
    vertical-align: top;
}
.elem {
    height: 60px;
    width: 150px;
    background-color: yellow;
    margin: 8px 0px;
    position: relative;
    transition: all 1s ease;
    white-space:normal;
    overflow: hidden;
    border-radius:...

JavaScript

var expanded = false;

$(".elem").click(function () {
    var elem = $(this);
    if(!elem.hasClass("expand_more")){
        elem.toggleClass("expand");
        elem.parent().toggleClass("WithLarge");
        elem.children(".bar").toggleClass("visible");
        elem.children(".expand_button").toggleClass("visible");
        if($(this).parent().hasClass("right")){
            $(".left").toggleClass("shift_left");
        } else if($(this).parent().hasClass("left")){
            $(".right").toggleClass("shift_right");
        }
    }
});

$(".expand_button").click(function(e){
    $(this).parent().children(".bar").toggleClass("visible");
    $(this).parent().toggleClass("expand_more");
    $(this).parent().toggleClass("expand");
    $(this).parent().children(".expand_button").toggleClass("visible");
    $(this).parent().children(".close_button").toggleClass("visible");
    $(".left").toggleClass("shift_more_left");
    $(".right").toggleClass("shift_more_right");
    $(".fully_expanded_information").show();
    if($(this).parent().parent().hasClass("right")){
        $(this).parent().toggleClass("expand_more_shift_left");
        $(".left").toggleClass("shift_left");
    } else if($(this).parent().parent().hasClass("left")){
        $(this).parent().toggleClass("expand_more_shift_right");
        $(".right").toggleClass("shift_right");
    }
    expanded = true;
});

$(".close_button").click(function(e){
    $(this).parent().children(".bar").toggleClass("visible");
    $(".fully_expanded_information").hide();
    $(this).parent().toggleClass("expand_more");
    $(".right").toggleClass("shift_more_right");
    $(".left").toggleClass("shift_more_left");
    $(this).parent().toggleClass("expand");
    $(this).parent().children(".expand_button").toggleClass("visible");
    $(this).parent().children(".close_button").toggleClass("visible");
    if($(this).parent().parent().hasClass("right")){
        $(this).parent().toggleClass("expand_more_shift_left");
       ...