JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <section class="section-button-box">
        <div class="box-button box-color01" onClick="Button_Color(1);">
        </div>

        <div class="box-button box-color02" onClick="Button_Color(2);">
        </div>

    </section>

    <section class="section-color-box" id="Color_box">

        <div class="id_blue">
            <div class="box-size box-color01">
            </div>
        </div>

        <div class="id_red">
            <div class="box-size box-color02">
            </div>
        </div>
        
        <div class="id_blue">
            <div class="box-size box-color01">
            </div>
        </div>
        
        <div class="id_red">
              <div class="box-size box-color02">
              </div>
        </div>

    </section>

</body>

CSS

/*|  Button Box  |*/
.section-button-box{
    height:100px;
    width:100%;
    background-color:aqua;
}
.box-button{
    height:50px;
    width:50px;
    float:left;
}

/*|  Color Box  |*/
.section-color-box{
    height:300px;
    background-color:#c1c1c1;
    width:100%;
}
.box-size{
    height:100px;
    width:100px;
    float:left;
}
.box-color01{
    background-color:blue;
}
.box-color02{
    background-color:red;
}

.hid{
    height:0px;
    width:0px;
}
.uhid{
    height:100px;
    width:100px;
}

JavaScript

/*|  Blue box  |*/
function Button_Color(Show_This) {
    var x = document.getElementById("Color_box");
    var i;
    var Show_This;

    if (Show_This == 1)
    {
        var d = document.getElementsByClassName("id_blue");
        d[0].className = "hid";
        
        var o = document.getElementsByClassName("id_red");
        o[0].className = " uhid";
    }
    if (Show_This == 2) {
    
    		var d = document.getElementsByClassName("id_blue");
        d[0].className = "hid";
        
        var o = document.getElementsByClassName("id_red");
        o[0].className = " uhid";
    }

    
}