JSFiddle - React, Tailwind, and code Playground
HTML
<div class="text-price">
<span>п</span>
<span>р</span>
<span>а</span>
<span>й</span>
<span>с</span>
</div>
CSS
.text-price {
text-align: center;
padding-top: 80px;
padding-bottom: 80px;
}
.text-price span {
display: inline-block;
transition: transform 0.6s ease-in-out;
}
.text-price span:first-child {
transform: translateY(10px);
}
.text-price span:nth-child(2) {
transform: translateY(-10px);
}
.text-price span:nth-child(3) {
transform: translateY(0px);
}
.text-price span:nth-child(4) {
transform: translateY(10px);
}
.text-price span:last-child {
transform: translateY(15px);
}