JSFiddle - React, Tailwind, and code Playground

by Thalita

HTML

<div class="title" data-title="Cool title">Cool title</div>
<div class="alternative-title" style="margin-top: 2rem;">Cool title</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,700&display=swap');

$bodyTextColor: #00004c;

.title, .alternative-title {
    letter-spacing: 8px;
    position: relative;
    font-style: italic;
    font-weight: 700;
    font-size: 140px;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
}

.title {
    color: $bodyTextColor;
    -webkit-text-stroke: 2px $bodyTextColor;
    text-shadow: 
        0.1px 0.1px 0 #fff, 
        0.2px 0.2px 0 #fff, 
        0.3px 0.3px 0 #fff, 
        0.4px 0.4px 0 #fff, 
        0.5px 0.5px 0 #fff, 
        0.6px 0.6px 0 #fff, 
        0.7px 0.7px 0 #fff, 
        0.8px 0.8px 0 #fff, 
        0.9px 0.9px 0 #fff,
        1px 1px 0 #fff, 
        1.1px 1.1px 0 #fff, 
        1.2px 1.2px 0 #fff, 
        1.3px 1.3px 0 #fff, 
        1.4px 1.4px 0 #fff, 
        1.5px 1.5px 0 #fff, 
        1.6px 1.6px 0 #fff, 
        1.7px 1.7px 0 #fff, 
        1.8px 1.8px 0 #fff, 
        1.9px 1.9px 0 #fff, 
        2px 2px 0 #fff, 
        2.1px 2.1px 0 #fff, 
        2.2px 2.2px 0 #fff, 
        2.3px 2.3px 0 #fff, 
        2.4px 2.4px 0 #fff, 
        2.5px 2.5px 0 #fff, 
        2.6px 2.6px 0 #fff, 
        2.7px 2.7px 0 #fff, 
        2.8px 2.8px 0 #fff, 
        2.9px 2.9px 0 #fff, 
        3px 3px 0 #fff, 
        3.1px 3.1px 0 #fff, 
        3.2px 3.2px 0 #fff, 
        3.3px 3.3px 0 #fff, 
        3.4px 3.4px 0 #fff, 
        3.5px 3.5px 0 #fff, 
        3.6px 3.6px 0 #fff, 
        3.7px 3.7px 0 #fff, 
        3.8px 3.8px 0 #fff, 
        3.9px 3.9px 0 #fff, 
        4px 4px 0 #fff, 
        4.1px 4.1px 0 #fff, 
        4.2px 4.2px 0 #fff, 
        4.3px 4.3px 0 #fff, 
        4.4px 4.4px 0 #fff, 
        4.5px 4.5px 0 #fff, 
        4.6px 4.6px 0 #fff, 
        4.7px 4.7px 0 #fff, 
        4.8px 4.8px 0 #fff, 
        4.9px 4.9px 0 #fff, 
        5px 5px 0 #fff, 
        5.1px 5.1px 0 #fff, 
        5.2px 5.2px 0 #fff, 
        5.3px 5.3px 0 #fff, 
        5.4px 5.4px 0 #fff, 
       ...