JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div id="live" class="box">
    <h1>Starting point</h1>
</div>

<button>Example 1</button>
<button>Example 2</button>


<div id="example" class="hidden">
    <h1>Hello World.</h1>
</div>

CSS

div.box {
    margin: 20px 0;
    border: solid 3px red;
}

div.hidden {
    display: none;
}

JavaScript

(function($) {
    
    var live = $('div#live').after('<div id="load" class="hidden" />'),
        load = live.next('div#load'),
        example = $('div#example').html();
    
    console.log(live);
    
    $.ajax({
        url: '/echo/html/',
        type: 'POST',
        data: {
            html: example,
            delay: 0
        },
        success: function(d) {
            console.log(d);
            load.html(d);
            live.html(load.html());
        },
        dataType: 'html'
    });
    
})(jQuery);