JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="pace-letters-loader-outer">
    <div class="pace-letters-loader">
        <div class="title1"><span>M</span><span>A</span><span>F</span><span>O</span><span>N</span><span>&nbsp;</span><span>G</span><span>R</span><span>O</span><span>U</span><span>P</span></div>
        <div class="title2"><span>M</span><span>A</span><span>F</span><span>O</span><span>N</span><span>&nbsp;</span><span>G</span><span>R</span><span>O</span><span>U</span><span>P</span></div>
</div>
</div>

CSS

.pace-letters-loader-outer {
    position: fixed;
    background: rgba(255, 255, 255, .9);
    text-align: center;
    line-height: 100vh;
    width: 100%;
    padding: 0 10%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

body.pace-running .pace-letters-loader-outer {
    opacity: 1;
    transition: none;
}

body.pace-done .pace-letters-loader-outer {
    opacity: 0
}

.pace-letters-loader {
    position: relative;
    font-size: 75px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: bold;
}

@media (min-width: 1700px) { .pace-letters-loader > * { font-size: 188%; } }
@media (max-width: 1700px) { .pace-letters-loader > * { font-size: 188%; } }
@media (max-width: 1680px) { .pace-letters-loader > * { font-size: 186%; } }
@media (max-width: 1660px) { .pace-letters-loader > * { font-size: 184%; } }
@media (max-width: 1640px) { .pace-letters-loader > * { font-size: 182%; } }
@media (max-width: 1620px) { .pace-letters-loader > * { font-size: 180%; } }
@media (max-width: 1600px) { .pace-letters-loader > * { font-size: 178%; } }
@media (max-width: 1580px) { .pace-letters-loader > * { font-size: 176%; } }
@media (max-width: 1560px) { .pace-letters-loader > * { font-size: 174%; } }
@media (max-width: 1540px) { .pace-letters-loader > * { font-size: 172%; } }
@media (max-width: 1520px) { .pace-letters-loader > * { font-size: 170%; } }
@media (max-width: 1500px) { .pace-letters-loader > * { font-size: 168%; } }
@media (max-width: 1480px) { .pace-letters-loader > * { font-size: 166%; } }
@media (max-width: 1460px) { .pace-letters-loader > * { font-size: 164%; } }
@media (max-width: 1440px) { .pace-letters-loader > * { font-size: 162%; } }
@media (max-width: 1420px) { .pace-letters-loader > * { font-size: 160%; } }
@media (max-width: 1400px) { .pace-letters-loader > * { font-size: 158%; } }
@media (max-width: 1380px) { .pace-letters-loader > * { font-size: 156%; }...

JavaScript

document.body.className = 'pace-running';

setTimeout(function(){
  document.body.className = 'pace-done';
}, 2000);