JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carrouselWrapper">
    <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>
</div>

CSS

.carrouselWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.carrousel {
    width: 200%;
}
.item {
    float: left;
    width: 50%;
    display: inline;
}
.active {
    display: block;
    left: 0;
}

JavaScript

$(document).ready(function () {

    $("#for_a").click(function () {
        $("#about").animate({
            marginLeft: "-100%"
        }, 1000)

        $("#artists").animate({
            marginLeft: "0px"
        }, 1000)
    })

    $("#for_b").click(function () {
        $("#artists").animate({
            marginLeft: "100%"
        }, 1000)
        $("#about").animate({
            marginLeft: "0px"
        }, 1000)
    })
})