JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.js"></script>
<script src="http://flin.org/jquery.transform.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://flin.org/jquery.transformable-v.3.js"></script>
                    <select name="font" id="font-select">
                        <option disabled>*** System Fonts ***</option><option class="system_font" value="Arial">Arial</option>Arial<option class="system_font" value="Garamond">Garamond</option>Garamond<option class="system_font" value="Georgia">Georgia</option>Georgia<option class="system_font" value="Helvetica">Helvetica</option>Helvetica<option class="system_font" value="Palatino">Palatino</option>Palatino<option class="system_font" value="Tahoma">Tahoma</option>Tahoma<option class="system_font" value="Times New Roman">Times New Roman</option>Times New Roman<option class="system_font" value="Trebuchet MS">Trebuchet MS</option>Trebuchet MS<option class="system_font" value="Verdana">Verdana</option>Verdana    
                    </select>


<div class='area'>

<div class='container'>
<h2 contenteditable>A Web Typography Tool</h2>
</div>

</div>

CSS

body {
    
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


.area {
  border-top: solid 1px;   
  margin: 10px 0;
    padding: 10px;
}
.container {
    display: inline-block;
    border: dashed 1px #ccc;
}
h2 {
 font-weight:normal;   
}

/* @group Base */
.chzn-container {
  font-size: 13px;
  position: relative;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.chzn-container .chzn-drop {
  background: #fff;
  border: 1px solid #aaa;
  border-top: 0;
  position: absolute;
  top: 29px;
  left: 0;
  -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
  -moz-box-shadow   : 0 4px 5px rgba(0,0,0,.15);
  -o-box-shadow     : 0 4px 5px rgba(0,0,0,.15);
  box-shadow        : 0 4px 5px rgba(0,0,0,.15);
  z-index: 1010;
}
/* @end */

/* @group Single Chosen */
.chzn-container-single .chzn-single {
  background-color: #ffffff;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );   
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-image: -ms-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background-image: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
  -webkit-border-radius: 5px;
  -moz-border-radius   : 5px;
  border-radius        : 5px;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
  border: 1px solid #aaaaaa;
  -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow   : 0...

JavaScript

var targets = $("#font-select");
var output = $("h2");
var base = "http://fonts.googleapis.com/css?family=";


    var b=$('.container');
    b.draggable();
    b.resizable();
    b.transformable();

var defaultFonts = new Array(
            h1 = 'Ultra',
            h2 = 'Trebuchet MS',
            p = 'Trebuchet MS'
        );

        var defaultList = targets.children();

    function chosenAttach() {
        $(targets).chosen();
        
        $(targets).change(function() {
            var font = $(this).val();
            $(".chzn-single span").css("font-family", font);
            output.css("font-family", font); 
        });
        
        $('#font_select_chzn .active-result').each(function() {
            $(this).css('font-family', $(this).html());
        });
    }

    function changeFonts(fontList) {
        
        
    }


    function getFonts(fontList) {
        //removing default variants from DOM when Google responds
        //$(defaultVarients).remove();
        
        
        $(targets).empty();
        var fontNameList = [];
        
        //$(targets).append('<option>*** Google Fonts ***</option>');
        for (var i=0, j = fontList.length; i < j; i+=1) {    
            
            if(fontList[i].subsets.indexOf('latin') !== -1) {
                var fontName = fontList[i].family;
                var fontCallName = fontList[i].family.replace(/\s+/g, '+');
                var fontNameLetters = fontList[i].family.replace(/\s+/g, '');
                
                fontNameList .push(fontCallName);
                
                $(targets).append('<option value="'+ fontName +'">'+ fontName +'</option>');
                //&text=' + fontNameLetters +'
                //$('<link rel="stylesheet" href="' + base + fontCallName +'&subset=latin"  type="text/css" />').prependTo('head');
            }
        }
        
        // Append style tags to head (split up all fonts to prevent error from Google Web Fonts API).
        var...