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="https://github.com/harvesthq/chosen/raw/master/chosen/chosen-sprite.png"></script>
    
    <link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do|Loved+by+the+King|Love+Ya+Like+A+Sister|Shadows+Into+Light|Waiting+for+the+Sunrise|La+Belle+Aurore|Kristi|Annie+Use+Your+Telescope|The+Girl+Next+Door|Permanent+Marker|Give+You+Glory|Sue+Ellen+Francisco|Just+Me+Again+Down+Here|Coming+Soon|Unkempt|Kranky|Cabin+Sketch:700|Calligraffitti|Dawning+of+a+New+Day|Schoolbell|Rock+Salt|Swanky+and+Moo+Moo|Reenie+Beanie|Gloria+Hallelujah|Covered+By+Your+Grace|Miltonian|Zeyada' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Nova+Oval|Orbitron|Sniglet:800|VT323|Slackey|Smokum|Allan:700|Mountains+of+Christmas|Black+Ops+One|Walter+Turncoat|Ruslan+Display|UnifrakturMaguntia|Chewy|Irish+Grover|Sunshiney|Bangers|Luckiest+Guy|Monofett|Monoton|Short+Stack|Megrim' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Lobster+Two|Yellowtail|Aclonica|Philosopher|Over+the+Rainbow|Astloch|Meddon|Merienda+One|Rochester|Delius+Swash+Caps|Montez|Cedarville+Cursive|Amaranth|Redressed|Vibur|Fontdiner+Swanky|Tangerine|Calligraffitti|Dawning+of+a+New+Day|Homemade+Apple|Crafty+Girls|Pacifico|League+Script|Leckerli+One' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Forum|Bigshot+One|Holtwood+One+SC|IM+Fell+DW+Pica+SC|PT+Serif+Caption|Old+Standard+TT|Stardos+Stencil|Six+Caps|Josefin+Slab|Special+Elite|IM+Fell+English+SC|Buda:300|Ubuntu|Syncopate|Wire+One|Modern+Antiqua' rel='stylesheet' type='text/css' />


    
<select data-placeholder="Choose a font stack" style="width:350px;" class="chzn-select" id='font-family' multiple tabindex="6">
          <option value=""></option>
          <optgroup label="Standards">
            <option>sans-serif</option>
       ...

CSS

input[type=slide] { width: 30px; padding:3px; text-align:right; margin:0; border: solid 1px; margin-right: 20px;} 
.slide {position:relative; display:inline-block;
border:solid 1px; background: grey; padding:2px; border-radius: 5px;
}
.slide em { position:absolute; top:0; right:0; width: 18px; height: 100%; background:grey; display:block; }
.slide b { display:block; width: 100%; height: 100%; }


.arrow-right {
        width: 0;
        height: 0;
        margin-top:5px;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;

        border-left: 5px solid #fff;
}



/* @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: 999;
}
/* @end */

/* @group Single Chosen */
.chzn-container-single .chzn-single {
  background-color: #fff;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
  background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
  background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
  background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
  background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
  -webkit-border-radius: 4px;
  -moz-border-radius   : 4px;
  border-radius        : 4px;
  -moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        :...

JavaScript

function onSelectionChange() {
    var items = elements.fontFamilyChosen.find(".search-choice").map(function(el) {
        $(this).css("font-family", $(this).text());
       return $(this).text(); 
    }).get();
    
    $("h1").css("font-family", items.join(', ')); 
  
}

var elements = { };
$(function() {
    $(".chzn-select").chosen();
    
    $("#font_family_chzn .chzn-results li").css("font-family", function() { 
         return "'" + $(this).text() + "'";            
    });
    elements.fontFamily = $("#font-family");
    elements.fontFamilyChosen = $("#font-family_chzn");
    
    elements.fontFamily.bind("change", function() {
        console.log($(this).val());
        elements.fontFamilyChosen.find(".chzn-choices").sortable('destroy').sortable({
            items: '> .search-choice',
            update: onSelectionChange
        });   
        onSelectionChange();
    });
    
    elements.fontFamilyChosen.find("li").
        css("font-family", function() {
           return $(this).text();
        });
});