JSFiddle - React, Tailwind, and code Playground

by code_rum

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="id2" class="box_1"><div class="box_content">           
    </div></div>
<div id="id2" class="box_1"><div class="box_content">           
</div></div>
<div id="id2" class="box_1"><div class="box_content">           
</div></div>
<div id="id2" class="box_1"><div class="box_content">           
</div></div>
</div>

CSS

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

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

.main {
    width: 150px;
}

JavaScript

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