JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="http://fonts.googleapis.com/css?family=Slackey|Chewy"></script>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
  lang="en-us" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>aboutscript | home</title>
    <meta name="author" content="Frankie Bagnardi" />
    <meta name="description" content="Learn about scripting with tutorials, news, and more.  Let's make the computers do the work!" />
    <meta name="keywords" content="scripting tutorials python javascript autohotkey productivity" />
    <meta name="generator" content="BlueGriffon wysiwyg editor" />
    <style type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Slackey|Chewy' rel='stylesheet' type='text/css' />

html {
    background-color: rgb(5, 5, 5);
}

* {
    color: #fff;
}

body {
    /* colorzilla: Black 3D #1 */
    background: #45484d;
    background: -moz-linear-gradient(left, #45484d 0%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#45484d), color-stop(100%,#000000));
    background: -webkit-linear-gradient(left, #45484d 0%,#000000 100%);
    background: -o-linear-gradient(left, #45484d 0%,#000000 100%);
    background: -ms-linear-gradient(left, #45484d 0%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 );
    background: linear-gradient(left, #45484d 0%,#000000 100%);
}

hr {
    color: #888;
    width: 90%;
    margin-left: 1%;
}

.header:hover hr {
    color: #fff;
}

div {
    border-radius: 5%;
}


.header, .footer {
    position: fixed;
    width: 100%;
    height: 20%;
}

.header {
    top: 0;
}

.footer {
    top: 80%;
}

.option {
    position: fixed;
    left: 5%;
    top: 25%;
    width: 40%;
    height:...

JavaScript

/*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 );