JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="blocoSite">
    <li data-date="2010-05-12">2010</li>
    <li data-date="2012-05-12">2012</li>
    <li data-date="2015-05-12">2015</li>
    <li data-date="2008-05-12">2008</li>
    <li data-date="2009-05-12">2009</li>
    <li data-date="2010-05-12">2010</li>
</ul>
<button id="ordeData">CLICK</button>

CSS

li { position: absolute; }

JavaScript

$(function(){
    var tllp = 15;
    $('#blocoSite li').each(function(i, lep){
        $(lep).css({ top : tllp });
        tllp += 15;
    });
});

$(document).ready(function() {

    var tipo = "decrescente";
    $('#ordeData').click(function() { 
        tipo = tipo == "acrescente" ? "decrescente" : "acrescente"
        var nposY = 0;
    
        function lxp(a, b){
            var adate = new Date($(a).attr("data-date"));
            var bdate = new Date($(b).attr("data-date"));
        
            if(tipo == 'acrescente'){
                return adate > bdate ? -1 : 1;
            }else if(tipo == 'decrescente'){
                return adate < bdate ? -1 : 1;
            }
        }
    
        $("#blocoSite li").sort(lxp).each(function(i, el){
            nposY = i * 15;
           
            $(this).animate({
                left: 200,
                top :  nposY
            }, 800);
        });
        
    })
})