JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<h1><span class="word">L</span><span class="word-end">etter</span> <span class="side-a">to</span>
<span class="side-b">me</span></h1>

CSS

h1 {
    margin: 10px;
    position: relative;
    font-family: 'Arial Black', Arial, sans-serif;
}

.word {
    font-size: 8em;
    position: absolute;
    top: 0;
    left: 0;
}

.word-end {
    font-family: Arial, sans-serif;
    position: absolute;
    top: 3em;
    left: 3em;
    text-transform: uppercase;
}
.side-a {
    color: #fff;
    font-size: 90%;
    position: absolute;
    top: 4em;
    left: 1em;
}

.side-b {
    color: #fff;
    font-size: 90%;
    position: absolute;
    top: 8.3em;
    left: 4em;
}