JSFiddle - React, Tailwind, and code Playground

by Evgenii Malikov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>This is a heading</h2>
<p>This is a paragraph</p>
<a href="#">This is a link</a>

JavaScript

var $fontSelector = $('<div class="alert alert-info"><form><div class="form-group"><label>Select font</label><select class="form-control"></select></div></form></div>');
	var $select = $('select', $fontSelector);
	var fonts = [
	    'Georgia, serif',
	    '"Palatino Linotype", "Book Antiqua", Palatino, serif',
	    '"Times New Roman", Times, serif',
	    'Arial, Helvetica, sans-serif',
	    '"Arial Black", Gadget, sans-serif',
	    '"Comic Sans MS", cursive, sans-serif',
	    'Impact, Charcoal, sans-serif',
	    '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
	    'Tahoma, Geneva, sans-serif',
	    '"Trebuchet MS", Helvetica, sans-serif',
	    'Verdana, Geneva, sans-serif',
	    '"Courier New", Courier, monospace',
	    '"Lucida Console", Monaco, monospace'];
	$fontSelector.css({
	    'position': 'fixed',
	    'top': '200px',
	    'right': '150px',
	    'z-index': 999
	});
	$.each(fonts, function () {
	    $select.append($('<option />').text(this).val(this));
	});
	$('body').append($fontSelector);
	$select.on('change', function () {
	    $('body, h1, h2, h3, h4, h5, h6, span, a, p').css('font-family', this.value);
	});