JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="parDi">
        <div class="kp">KP</div>
        <div class="rp">RP</div>
        <div class="kpp">JAMES BOND</div>
    </div>
</div>

CSS

.wrapper {
    width:500px;
    margin:0 auto;
}
.parDi {
    width:500px;
    background:#000;
    height:50px;
    color:#fff;
    position: relative;
}
.kp {
    position:absolute;
    left:-128px;
}
.rp {
    position:absolute;
    left:-108px;
}
.kpp {
    position:absolute;
    left:-98px;
}

JavaScript

$(document).ready(function () {
    $('.kp').animate({
        left: '10px'
    }, 600);
    $('.kp').delay(600).animate({
        left: '-128px'
    }, 600);
    $('.rp').delay(2000).animate({
        left: '10px'
    }, 600);
    $('.rp').delay(600).animate({
        left: '-108px'
    }, 600);
    $('.kpp').delay(4000).animate({
        left: '10px'
    }, 600);
});