JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

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

CSS

* { margin: 0; padding: 0; }

html { 
    font-size: 100%; 
    height: 100%;
}

body { 
    font: 100%/1 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    
    -webkit-animation-name: disco;
    -webkit-animation-duration: 24s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
}

header { width: 100%; margin: 6em 0; }

.disco {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: -.05em;
    text-align: center; 
    font-size: 16em;
    font-weight: 900;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(10,10,10,1)), color-stop(50%,rgba(201,202,203,1)), color-stop(100%,rgba(10,10,10,1)));
    background: -webkit-linear-gradient(left, rgba(10,10,10,1) 0%,rgba(201,202,203,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-in-out;
    -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

// disco v1 by @genelocklin
// http://bit.ly/tsrOrt

/*global jQuery */
/*!    
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){
    
    $.fn.fitText = function( kompressor, options ) {
        
        var settings = {
        'minFontSize' : Number.NEGATIVE_INFINITY,
        'maxFontSize' : Number.POSITIVE_INFINITY
      };
    
            return this.each(function(){
                var $this = $(this);              // store the object
                var compressor = kompressor || 1; // set the compressor
        
        if ( options ) { 
          $.extend( settings, options );
        }
        
        // Resizer() resizes items based on the object width divided by the compressor * 10
                var resizer = function () {
                    $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
                };

                // Call once to set.
                resizer();
                
                // Call on resize. Opera debounces their resize by default. 
          $(window).resize(resizer);
          
            });

    };

})( jQuery );






$('.disco').fitText(.5);