JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<span class="arced">
    <span class="char1">M</span>
    <span class="char2">a</span>
    <span class="char3">r</span>
    <span class="char4">c</span>
    ...
</span>

CSS

.show .hero h1 .arced > span:nth-child(1) {
    -webkit-transform: translateX(-1px) translateY(68px) rotate(-17deg);
       -moz-transform: translateX(-1px) translateY(68px) rotate(-17deg);
        -ms-transform: translateX(-1px) translateY(68px) rotate(-17deg);
         -o-transform: translateX(-1px) translateY(68px) rotate(-17deg);
            transform: translateX(-1px) translateY(68px) rotate(-17deg);

    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}

.show .hero h1 .arced > span:nth-child(2) {
    -webkit-transform: translateX(-3px) translateY(39px) rotate(-13deg);
       -moz-transform: translateX(-3px) translateY(39px) rotate(-13deg);
        -ms-transform: translateX(-3px) translateY(39px) rotate(-13deg);
         -o-transform: translateX(-3px) translateY(39px) rotate(-13deg);
            transform: translateX(-3px) translateY(39px) rotate(-13deg);

    -webkit-transition-delay: .04s;
       -moz-transition-delay: .04s;
         -o-transition-delay: .04s;
            transition-delay: .04s;
}