JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<button class="load-style-1">Load style 1</button>
<button class="load-style-2">Load style 2</button>
<button class="load-style-3">Load style 3</button>

JavaScript

var style1 = 'body {background: red}';
var style2 = 'body {background: green}';
var style3 = 'body {background: blue}';

function loadStyle(data) {
        $('#ajax-css').remove(); // Remove previous CSS
                                 // received by AJAX (if exists)

        var $styleElement = $('<style/>');
        $styleElement.attr('type', 'text/css');
        $styleElement.attr('id', 'ajax-css'); // ...so that we can find
                                              // and replace this element later
        $styleElement.html(data);
        $styleElement.appendTo($('head'));
}


$('.load-style-1').click(function() { loadStyle(style1); });
$('.load-style-2').click(function() { loadStyle(style2); });
$('.load-style-3').click(function() { loadStyle(style3); });