JSFiddle - React, Tailwind, and code Playground
HTML
<section class='container'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class='container'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<section class='misc'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
CSS
.container {
padding:0 0 1em;
}
JavaScript
(function($){
//our jQuery plugin
$.fn.moveItems = function() {
$(this).children(':first-child').animate(
{width: "0px"},
500,
function (){
$(this).appendTo($(this).parent());
}
);
}
//call the plugin.
$(".container").moveItems();
$(".misc:first").moveItems();
})(jQuery);