JSFiddle - React, Tailwind, and code Playground

HTML

<!-- resources needed for mojo.js -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/classdojo/loaf.js/master/build/loaf4.min.js"></script>

<p>Below is an example of how loaf.js works. Check out how the DOM is modified when toggling the message visibility. </p>

<div id="application">
</div>

JavaScript

var helloSection = loaf(), buttonSection = loaf(), buttonElement;

// add multiple items - this demonstrates how multiple nodes are controlled by one
// section
helloSection.append(document.createTextNode("Hello "));
helloSection.append(document.createTextNode("World!"));

// setup the button which toggles the message visibility
buttonSection.append(buttonElement = $("<div><a href='#'>Toggle Message Visibility</a></div>")[0]);

// create a toggle for the "Hello World!" message.
$(buttonElement).click(function () {
    if(helloSection.visible) {
        helloSection.hide();
    } else {
        helloSection.show();
    }
});

// convert the sections into controlled document fragments.
$("#application").append(helloSection.toFragment());
$("#application").append(buttonSection.toFragment());