JSFiddle - React, Tailwind, and code Playground

HTML

<p class="line1"><span>П</span><span>Р</span><span>И</span><span>В</span><span>Е</span><span>Т</span></p>
<p class="line2"><span>П</span><span>Р</span><span>И</span><span>В</span><span>Е</span><span>Т</span></p>
<p class="line3"><span>П</span><span>Р</span><span>И</span><span>В</span><span>Е</span><span>Т</span></p>

CSS

.line1 { text-align: right; }
.line2 { text-align: center; }
.line3 { text-align: left; }

.line1 span:nth-child(1) { color: #ff0000; font-size: 20px; }
.line1 span:nth-child(2) { color: #ffff00; font-size: 22px; }
.line1 span:nth-child(3) { color: #99cc00; font-size: 24px; }
.line1 span:nth-child(4) { color: #000080; font-size: 26px; }
.line1 span:nth-child(5) { color: #800000; font-size: 28px; }
.line1 span:nth-child(6) { color: #800080; font-size: 30px; }