JSFiddle - React, Tailwind, and code Playground

by kuyabiye

HTML

<script src="http://fonts.googleapis.com/css?family=Emblema+One&amp;subset=latin,latin-ext"></script>
<style id="custom-styles"></style>

<div class="customizer clearfix" data-is-open="false">
    <div class="customizer-content">
       
    </div>
    <div class="customizer-opener">
    >
    </div>
 </div>
<h1 class="custom-font">Vestibulum urna leo</h1>
<h2 class="custom-font">Vivamus sagittis tellus ut libero rhoncus suscipit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna leo, commodo eu consequat ac, consequat rutrum diam. Quisque tempor fringilla bibendum. Vivamus facilisis, enim vel varius vulputate, nunc ligula laoreet libero, ut mattis eros nunc eu augue. Quisque pretium, velit vitae tincidunt porta, mi urna suscipit arcu, placerat accumsan libero enim pellentesque diam. Vivamus sagittis tellus ut libero rhoncus suscipit. In pretium pulvinar diam ut venenatis. Nam lectus arcu, commodo in venenatis sit amet, interdum a sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur at lorem mi, et placerat mauris.</p>

CSS

body {
 width: 300px;
margin: 0 auto;    
}


h1 {
    font-size: 2em;
    margin: 0 0 10px;
}

h2 {
    font-size: 1.5em;
    margin: 0 0 5px;
}

.customizer {
    background: #fff;
 position: absolute;
top: 10px;
left: -120px;    
}

.customizer-content {
         border: 1px solid red;
border-width: 1px 1px 1px 0;   
}


.customizer-content {
  width: 100px;
float: left;    
    padding: 10px;
}

.customizer-content select {
    width: 80px;
}

.customizer-opener {
    background: #fff;
        border: 1px solid red;
    border-width: 1px 1px 1px 0;
    margin-left: -1px;
  cursor: pointer;
  float: left;  
  padding: 10px;        
}



/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JavaScript

function loadjscssfile(filename, filetype) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref)
}


$(document).ready(function() {

    $.getJSON('https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB7ugKeOVBnmktsG6OIKq_13s-XBlCfxDI', function(data) {

        var items = data.items,
            itemsLen = items.length,
            i = 0,
            optionsHtml = '<option></option>',
            variants = [];

        for (i = 0; i < itemsLen; i += 1) {
            optionsHtml += '<option value="' + i + '">' + items[i].family + '</option>';
        }

        $('<select class="google-fonts" />').html(optionsHtml).on('change', function() {
            var selected = $(this).find(':selected').val(),
                font = items[selected].family;
            loadjscssfile('http://fonts.googleapis.com/css?family=' + font.replace(' ', '+') + '&subset=latin,latin-ext', "css") ////dynamically load and add this .css file
            $('#custom-styles').html('h1, h2 {font-family:' + font + '}');

            if (items[selected].variants.length > 0) {
                var variantsInput = $('.google-fonts-variants'),
                    j = 0
                    variantsOptions = '<option></option>';
                if (variantsInput.length === 0) {
                    variantsInput = $('<select class="google-fonts-variants" />').appendTo('.customizer-content');
                }

               ...