JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" id="container">
    <div class="post"><h1>first title</h1>description here</div>
    <div class="post"><h1>second title</h1>description here</div>
    <div class="post"><h1>third title</h1>description here</div>
        <div class="post"><h1>first title</h1>description here</div>
    <div class="post"><h1>second title</h1>description here</div>
    <div class="post"><h1>third title</h1>description here</div>
        <div class="post"><h1>first title</h1>description here</div>
    <div class="post"><h1>second title</h1>description here</div>
    <div class="post"><h1>third title</h1>description here</div>
        <div class="post"><h1>first title</h1>description here</div>
    <div class="post"><h1>second title</h1>description here</div>
    <div class="post"><h1>third title</h1>description here</div>
        <div class="post"><h1>first title</h1>description here</div>
    <div class="post"><h1>second title</h1>description here</div>
    <div class="post"><h1>third title</h1>description here</div>
</div>

JavaScript

$(document).ready(function(){
    $(".post").hide();
    
    (f=function(){
        $(".post:hidden:first").fadeIn(1000, f);
    })();
});