JSFiddle - React, Tailwind, and code Playground

by kougiland

CSS

/* white... */

/* S */
.char:nth-of-type(6) .part-1 {animation-delay:0.5s}
.char:nth-of-type(6) .part-2 {animation-delay:0.6s}
.char:nth-of-type(6) .part-3 {animation-delay:0.7s}
.char:nth-of-type(6) .part-4 {animation-delay:0.8s}
.char:nth-of-type(6) .part-5 {animation-delay:0.9s}

/* P */
.char:nth-of-type(7) .part-1 {animation-delay:1s}
.char:nth-of-type(7) .part-2 {animation-delay:1.1s}
.char:nth-of-type(7) .part-3 {animation-delay:1.2s}
.char:nth-of-type(7) .part-4 {animation-delay:1.3s}

/* A */
.char:nth-of-type(8) .part-1 {animation-delay:1.4s}
.char:nth-of-type(8) .part-2 {animation-delay:1.5s}
.char:nth-of-type(8) .part-3 {animation-delay:1.6s}
.char:nth-of-type(8) .part-4 {animation-delay:1.7s}

/* C */
.char:nth-of-type(9) .part-1 {animation-delay:1.8s}
.char:nth-of-type(9) .part-2 {animation-delay:1.9s}
.char:nth-of-type(9) .part-3 {animation-delay:2s}
.char:nth-of-type(9) .part-4 {animation-delay:2.1s}

/* E */
.char:nth-of-type(10) .part-1 {animation-delay:2.2s}
.char:nth-of-type(10) .part-2 {animation-delay:2.3s}
.char:nth-of-type(10) .part-3 {animation-delay:2.4s}
.char:nth-of-type(10) .part-4 {animation-delay:2.5s}

/* i */
.char:nth-of-type(11) {animation-delay:2.6s}

/* s */
.char:nth-of-type(12) .part-1 {animation-delay:2.7s}
.char:nth-of-type(12) .part-2 {animation-delay:2.8s}
.char:nth-of-type(12) .part-3 {animation-delay:2.9s}
.char:nth-of-type(12) .part-4 {animation-delay:3s}
.char:nth-of-type(12) .part-5 {animation-delay:3.1s}

/* B */
.char:nth-of-type(13) .part-1 {animation-delay:3.2s}
.char:nth-of-type(13) .part-2 {animation-delay:3.3s}
.char:nth-of-type(13) .part-3 {animation-delay:3.4s}
.char:nth-of-type(13) .part-4 {animation-delay:3.5s}
.char:nth-of-type(13) .part-5 {animation-delay:3.6s}

/* R */
.char:nth-of-type(14) .part-1 {animation-delay:3.7s}
.char:nth-of-type(14) .part-2 {animation-delay:3.8s}
.char:nth-of-type(14) .part-3 {animation-delay:3.9s}
.char:nth-of-type(14) .part-4 {animation-delay:4s}

/* E...