JSFiddle - React, Tailwind, and code Playground

HTML

<!--Start of container-->
        <div class="container">
            
            <!--Start of top collapsable tabs-->
            <div class="tab_collapsable pink">
                <h2 class="title">TITLE 01</h2>
            </div>
            <div class="tab_collapsable turquoise">
                <h2 class="title">TITLE 02</h2>
            </div>
            <div class="tab_collapsable yellow">
                <h2 class="title">TITLE 03</h2>
            </div>
            <div class="tab_collapsable orange">
                <h2 class="title">TITLE 04</h2>
            </div>
            <!--End of top collapsable tabs-->
    
            <!--Start of top collapsed content-->
            <div class="content pink">
                <h2>PINK</h2>
            </div>
            <div class="content turquoise">
                <h2>TURQUOISE</h2>
            </div>
            <div class="content yellow">
                <h2>YELLOW</h2>
            </div>
              <div class="content orange">
                <h2>RED</h2>
            </div>   
            <!--End of top collapsed content-->
    
            <!--Start of bottom static tabs-->
            <div class="static purple">
                <h2 class="title">TITLE 05</h2>
            </div>
            <div class="static green">
                <h2 class="title">TITLE 06</h2>
            </div>
            <div class="static blue">
                <h2 class="title">TITLE 07</h2>
            </div>
            <div class="static red">
                <h2 class="title">TITLE 08</h2>
            </div>
            <!--End of bottom static tabs-->

        </div>
        <!--End of container-->

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-image: url(wallpaper.png);
    background-size: cover;
}

.container {
    height: 100%;
    width: 1080px;
    margin: auto;
    background-color: transparent;
}

.tab_collapsable {
    width: 200px;
    height: 120px;
    float: left;
    text-align: center;
    margin: 100px 35px 0 35px;
    cursor: pointer;
    border-radius: 8px;
}

.title {
    line-height: 20px;
    color: #FFF;
}

.content {
    height: 0px;
    width: 1040px;
    position: absolute;
    top: 220px;
    float: left;
    margin-left: 20px;
    overflow: hidden;
    background-color: #e62d67;
    
}

.static {
    width: 200px;
    height: 250px;
    float: left;
    text-align: center;
    margin: 240px 35px 0 35px;
    border-radius: 8px;
}


.pink { background-color: #e62d67;}
.turquoise { background-color: #00b7bb; }
.yellow { background-color: #edc700; }
.orange { background-color: #f9493a; }
.purple { background-color: #B894FF; }
.green { background-color: #66E0A3; }
.blue { background-color: #66E0FF; }
.red { background-color: #B23636; }

JavaScript

$(document).ready(function() {  
    $('.tab_collapsable').on('click',function(){
        var tabClass = $(this).attr('class').split(' ')[1];
        var h = $('.content.'+tabClass).height() ? 0 : 210;
        
        $('.content').stop().animate({height: h},1200)
        .not('.'+tabClass).stop().animate({height: 0},1200);
        
        $('.static').stop().animate({height: h ? 0 : 250},1200);
    });
});