JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carrousel">
    <div class="item active" id="about">
        <p class="red">Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui Primeiro aqui </p>
        <a href="#" id="for_a">Ir para Artistas</a>
    </div>
    <div class="item" id="artists">
        <p>Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui Conteudo aqui </p>
        <a href="#" id="for_b">Ir para About</a>
    </div>
</div>

CSS

.carrousel{
    overflow: hidden;
}

.item{
    float: left;
    width: 100%;
    position: absolute;
    display: inline;
    left: 100%;  
}
.active{
    display: block;
    left: 0;
}
.nav{
    margin-top: 150px;
}
.red{
    background: red;
}

JavaScript

$(document).ready(function(){
    
    $("#for_a").click(function(){
        $("#about").animate({
            left: "-100%"
        }, 1000)
        
        $("#artists").animate({
            left: "0px"
        }, 1000)
    })
    
    $("#for_b").click(function(){
        $("#artists").animate({
            left: "100%"
        }, 1000)
        $("#about").animate({
            left: "0px"
        }, 1000)
    })
})