JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link href='http://fonts.googleapis.com/css?family=Lobster|Arvo:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic|The+Girl+Next+Door' rel='stylesheet' type='text/css'>

<div id='sliders'>
<div id="size"></div>
    <div id="space"></div>
<div id="lheight"></div>
</div>
    
<input id='t' placeholder='Enter some text' value='Hi There!' />

<div id='p'>
<div class='f-lobster'></div>
<div class='f-arvo '></div>
<div class='f-ubuntu'></div>
<div class='f-girl'></div>
</div>

CSS

.f-lobster { font-family: 'Lobster', cursive; }
.f-arvo { font-family: 'Arvo', serif; }
.f-ubuntu { font-family: 'Ubuntu', sans-serif; }
.f-girl { font-family: 'The Girl Next Door', cursive; }

button { -webkit-user-select:none; text-align: center; border:solid 1px; padding:0; }
#p { margin-top: 10px; }
#p div { margin: 0 auto; width: 95%; border: solid 2px; text-align: center; }
#sliders { width: 300px; margin-bottom: 10px; }

.myslider { position:relative; margin: 5px; margin-right: 25px; }
.reset { 
    position:absolute; right: -25px; top:0;width: 20px; height: 20px; 
    background:#333; border-radius: 5px; 
    color: #fff; font-weight:bold; text-align:center;
    cursor:pointer; 
    
}

JavaScript

/*
http://www.google.com/webfonts#UsePlace:use/Collection:Lobster|Arvo:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic|The+Girl+Next+Door
*/

var vals = {
    size: 18,
    space: 0,
    lineheight: 10
};

function sync() {
    $("#p div").text($("#t").val());
    
    $("#p div").css("font-size", vals.size);
    $("#p div").css("letter-spacing", vals.space);
    $("#p div").css("line-height", vals.lineheight  / 10);
}

$.fn.myslider = function(opts) {
    var args = arguments;
    
    return this.each(function() {
        $(this).wrap("<div class='myslider'></div>");
        $(this).parent().append("<button class='reset'>x</button>");
        $.fn.slider.apply($(this), args);
    }); 
};
$(function() {
    $("#t").bind("change keyup", sync);
    sync();
    
    $("#size").myslider ({
        min: 8,
        max: 80,
        value: vals.size,
        slide: function(e, ui) {
            vals.size = ui.value;
            sync();
        } 
    });
    
    $("#space").myslider ({
        min: -5,
        max: 20,
        value: vals.space,
        slide: function(e, ui) {
            vals.space = ui.value;
            sync();
        } 
    });
    
    $("#lheight").myslider ({
        min: 0,
        max: 100,
        value: vals.lineheight,
        slide: function(e, ui) {
            vals.lineheight = ui.value;
            sync();
        } 
    });
});