JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div id="id1" class="box_1"><div class="box_content">           
</div></div>
<div id="id2" class="box_1"><div class="box_content">           
</div></div>
<div id="id3" class="box_1"><div class="box_content">           
    </div></div>
<div id="id4" class="box_1"><div class="box_content">           
</div></div>
<div id="id5" class="box_1"><div class="box_content">           
</div></div>
<div id="id6" class="box_1"><div class="box_content">           
</div></div>
<div id="id7" class="box_1"><div class="box_content">           
</div></div>

</div>

CSS

#id1 {
background-color: red;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}

#id2 {
background-color: blue;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}

#id3 {
background-color: green;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}

.box_content {
float: left;
width: 288px;
height: 120px;
padding: 0 20px 20px;
}

#id4 {
background-color: yellow;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}
#id5 {
background-color: purple;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}
#id3 {
background-color: black;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}
#id6 {
background-color: grey;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}
#id7 {
background-color: orange;
float: left;
width: 30px;
height: 30px;
margin-right: 10px;
margin-bottom: 20px;
}

.main {
    width: 150px;
}

JavaScript

$( document ).click(function() {
$('.box_1:first-child').addClass('first');
    $('.box_1:last-child').addClass('last');
        $( ".first" ).toggle( "drop" );
});