JSFiddle - React, Tailwind, and code Playground
HTML
<div id='gameboard'>
<p class='card'>Hello</p>
<p class='card'>Hello</p>
<p class='card'>Hello</p>
<p class='card'>Hello</p>
<p class='card'>Hello</p>
<p class='card'>Hello</p>
</div>
CSS
.position{
background: #000;
}
JavaScript
var __OBJECTS = [];
$('#gameboard .card').each(function() {
__OBJECTS.push($(this));
});
addPositioningClasses();
function addPositioningClasses() {
var $card = __OBJECTS.pop();
$card.addClass('position');
$card.siblings().removeClass('position');
if (__OBJECTS.length) {
setTimeout(addPositioningClasses, 500)
}
else
{
$('#gameboard .card').each(function() {
__OBJECTS.push($(this));
});
addPositioningClasses();
}
}