JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="words">
    <span class="words__item">c</span>
    <span class="words__item">e</span>
    <span class="words__item">l</span>
    <span class="words__item">e</span>
    <span class="words__item">b</span>
    <span class="words__item">r</span>
    <span class="words__item">o</span>
</div>

SCSS

.words {
    font-size: 0;
    position: relative;
    border: 1px solid lime;
    letter-spacing: 0.1rem;
}

.words__item {
    --d: 45deg;
    --p: 100;

    display: inline-block;
    font-weight: 700;
    font-size: 2.8rem;
    user-select: none;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    color: hsla(var(--p), 69%, 42%, 0.7);
    transform: rotate(calc(var(--d) + 1deg));
    
    &:nth-child(1) {
        --p: 10;
        --d: 10deg;
    }

    &:nth-child(2) {
        --p: 20;
        --d: 10deg;
    }

    &:nth-child(3) {
        --p: 310;
        --d: 170deg;
    }

    &:nth-child(4) {
        --p: 40;
        --d: 12deg;
    }

    &:nth-child(5) {
        --p: 50;
        --d: 120deg;
    }
    
    &:nth-child(6) {
        --p: 60;
        --d: 15deg;
    }
}