JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent_container">
<div class="circle" n="2">1</div>
<div class="circle" n="1">2</div>
<div class="circle" n="3">3</div>
<div class="circle" n="4">4</div>
<div class="circle" n="5">5</div>
<div class="circle" n="7">6</div>
<div class="circle" n="6">7</div>
<div class="circle" n="8">8</div>
<div class="circle" n="9">9</div>
</div>

CSS

.circle {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: grey;
    border: 1px solid white;
    opacity: 0;
    color:#fff;
}

JavaScript

$('.circle[n]').sort(function (a, b) {
    return $(a).attr('n') > $(b).attr('n');
}).appendTo('#parent_container');

var delay = 0;
$('div').each(function () {
    $(this).delay(delay).animate({
        opacity: 1,
    }, 500);
    delay += 500;
});