JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blue">
    
</div>
<div class="yellow">
    
</div>
<div class="green">
    
</div>

CSS

@keyframes blue_anim
{
0%
{
left:-200px;
}
100%
{
left:200px;
}
}
@keyframes y_anim
{
0%
{
left:-200px;
}
100%
{
left:400px;
}
}

@keyframes g_anim
{
0%
{
left:-200px;
}
100%
{
left:600px;
}
}




.blue
{
animation-name: blue_anim;
animation-duration: 1s;
position:absolute;
top:0;
left:200px;
width: 200px;
height: 200px;
background:blue;
}
.yellow
{
animation-name: y_anim;
animation-duration: 1s;
position:absolute;
top:0;
left:400px;
width: 200px;
height: 200px;
background:yellow;
}
.green
{
animation-name: g_anim;
animation-duration: 1s;
position:absolute;
top:0;
left:600px;
width: 200px;
height: 200px;
background:green;
}