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="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>
<input type="button" class="next_button" value="next"/>
<input type="button" class="prev_button" value="prev"/>

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

$( '.next_button' ).click(function() {
    if ($('.first')[0]) {
        $('.first').next().addClass('first');
    } else {
        $('.box_1:first-child').addClass('first');
    }
    $('div.first:last').animate({'margin-left': '-100px'}, 500, 
    function() {$(this).hide();}
    );
    //$( ".first" ).fadeOut( "slow" );
 });

$( '.prev_button' ).click(function() {
    
         if ($('.first')[0]) {
             $('div.first:last').show().animate({'margin-left': '0px'},500);
            $('div.first:last').removeClass('first');
        }
 });