JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<h1 class="disco">disco</h1>

CSS

html, body { height: 100%;}
body { min-height: 100%; }
html { 
    font-size: 6.25%; 
}

body { 
    font-size: 16px; font-size: 16rem;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-animation-name: disco;
    -webkit-animation-duration: 24s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
}

.disco{
    margin-top: 16rem;
    text-transform: uppercase;
    letter-spacing: -2rem;
    text-align: center; 
    font: 300rem 'Josefin Sans', sans-serif;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(10,10,10,1)), color-stop(50%,rgba(221,222,223,1)), color-stop(100%,rgba(10,10,10,1)));
    background: -webkit-linear-gradient(left, rgba(10,10,10,1) 0%,rgba(221,222,223,1) 50%,rgba(10,10,10,1) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation-name: masked-animation;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
     -webkit-animation-fill-mode: both;
    background-size: 7050px 500px;
    }
    
@-webkit-keyframes masked-animation {
    0% {background-position: left;}
    50% {background-position: right;}
    100% {background-position: left;}
    }

@-webkit-keyframes disco {
    0% {
background: black;
        }
    50% {
background: white;
        }
    100% {
background: black;
        }
    }

JavaScript

WebFontConfig = {
    google: { families: [ 'Josefin+Sans:400:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();