JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class="detailsholder">Base</div>

CSS

.detailsholder { background-color: lightblue; width: 200px; height: 50px; text-align: center;}

JavaScript

$(document).ready(function() {
    $('.detailsholder').hide();
    $(".detailsholder").animate({"top": '-520px'}, 1);
    
    $('.detailsholder').hide();
    $('.detailsholder').fadeIn(500);
    
    $('.detailsholder')
        .delay(2000)
        .queue(function(n) {
            $(this).append(" - 1")
                .animate({'top': "-260px",'easing': "easeInElastic"}, 400)
                .delay(2000).queue(function(n) {
                    $(this).append(" - 2")
                        .animate({'top': "0px",'easing': "easeInElastic"},400);
                });
            n();
        });

});