JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<link rel="stylesheet" href="http://github.hubspot.com/pace/docs/resources/barber-pole-orange.css">
<script src="https://raw.githubusercontent.com/HubSpot/pace/v0.5.1/pace.min.js"></script>
<div class="section colored">
    <div class="header">
        <div class="title">
             <h1 class="title1"><span class="char1">p</span><span class="char2">a</span><span class="char3">c</span><span class="char4">e</span></h1>

             <h1 class="title2"><span class="char1">p</span><span class="char2">a</span><span class="char3">c</span><span class="char4">e</span></h1>

        </div>
        <div class="subtitle">
             <h3>Automatic page load progress bar</h3>

        </div>
    </div>

CSS

html, body {
    margin: 0;
    height: 100%;
    color: #000;
}
a, a:hover, a:active {
    text-decoration: none
}
body {
    font-family:"proxima-nova", "Helvetica Neue", sans-serif;
}
@media (min-width: 1700px) {
    html {
        font-size: 188%;
    }
}
@media (max-width: 1700px) {
    html {
        font-size: 188%;
    }
}
@media (max-width: 1680px) {
    html {
        font-size: 186%;
    }
}
@media (max-width: 1660px) {
    html {
        font-size: 184%;
    }
}
@media (max-width: 1640px) {
    html {
        font-size: 182%;
    }
}
@media (max-width: 1620px) {
    html {
        font-size: 180%;
    }
}
@media (max-width: 1600px) {
    html {
        font-size: 178%;
    }
}
@media (max-width: 1580px) {
    html {
        font-size: 176%;
    }
}
@media (max-width: 1560px) {
    html {
        font-size: 174%;
    }
}
@media (max-width: 1540px) {
    html {
        font-size: 172%;
    }
}
@media (max-width: 1520px) {
    html {
        font-size: 170%;
    }
}
@media (max-width: 1500px) {
    html {
        font-size: 168%;
    }
}
@media (max-width: 1480px) {
    html {
        font-size: 166%;
    }
}
@media (max-width: 1460px) {
    html {
        font-size: 164%;
    }
}
@media (max-width: 1440px) {
    html {
        font-size: 162%;
    }
}
@media (max-width: 1420px) {
    html {
        font-size: 160%;
    }
}
@media (max-width: 1400px) {
    html {
        font-size: 158%;
    }
}
@media (max-width: 1380px) {
    html {
        font-size: 156%;
    }
}
@media (max-width: 1360px) {
    html {
        font-size: 154%;
    }
}
@media (max-width: 1340px) {
    html {
        font-size: 152%;
    }
}
@media (max-width: 1320px) {
    html {
        font-size: 150%;
    }
}
@media (max-width: 1300px) {
    html {
        font-size: 148%;
    }
}
@media (max-width: 1280px) {
    html {
        font-size: 146%;
    }
}
@media (max-width: 1260px) {
    html {
        font-size: 144%;
    }
}
@media (max-width: 1240px) {
    html {
        font-size:...

JavaScript

setTimeout(function () {
    document.body.className = 'page-loaded'
}, 0);