JSFiddle - React, Tailwind, and code Playground

by orwellophile

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus, lacus vitae pulvinar suscipit, turpis turpis facilisis ligula, vel imperdiet lectus leo et nisi. Donec quis justo in dui scelerisque vulputate non ut arcu. Cras mollis vestibulum nibh, ut suscipit est iaculis facilisis.</p>
<p>Maecenas suscipit sem id libero euismod tincidunt. Mauris a nibh sed massa aliquam lobortis id at odio. Mauris ac justo sed orci tempor scelerisque vitae a ipsum. Cras lacinia rutrum dolor, a rhoncus justo lacinia rutrum. Ut molestie auctor velit in commodo.</p>
<p style="text-align: center">
    <button id="Simple" onclick="dialog.show()">Simple</button>
    <button id="Custom" onclick="dialog.show(customDialogHtml)">Custom</button>
</p>
<p>Nam quam mauris, consequat at dictum quis, vehicula sit amet augue. Etiam id nisi ac tellus sollicitudin malesuada eu eu quam. Proin pulvinar lobortis augue ut rhoncus. In hac habitasse platea dictumst. Aliquam ac diam in risus aliquam sollicitudin vitae eu mi. Phasellus vel risus nibh. Sed mollis molestie interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nec risus nunc, ac fermentum mi.</p>

CSS

body {
    font-family: Cambria, Georgia;
}
p {
    padding-left: -2em;
}
p:first-letter {
    margin-left: 2em;
}

JavaScript

customDialogHtml = "<img onclick=\"dialog.close()\" src=\"http://nt4.com/ss/AnonymousNoFaces.png\">";

// Module pattern from http://www.yuiblog.com/blog/2007/06/12/module-pattern/
dialog = function () {
    var dialogHtml = '<textarea rows="5" cols="25"></textarea><button id="close">Close</button>';

    var hereDoc = function (f) {
        // From http://stackoverflow.com/a/5571069/912236
        return f.toString().
        replace(/^[^\/]+\/\*!?/, '').
        replace(/\*\/[^\/]+$/, '');
    };

    var insertElement = function (newElement, parentElement) {
        // Base on https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore#Example2

        // Get a reference to the element in which we want to insert a new node
        parentElement = parentElement || document.body;

        // Get a reference to the first child
        var theFirstChild = parentElement.firstChild;

        // Create a new element
        // var newElement = document.createElement("div");

        // Insert the new element before the first child
        parentElement.insertBefore(newElement, theFirstChild);
    };

    var setupHtml = function () {
        // Based on http://stackoverflow.com/a/1992405/912236
        var elModal = document.createElement('div');
        elModal.id = 'modal';
        elModal.innerHTML = dialogHtml;

        var elShade = document.createElement('div');
        elShade.id = 'shade';

        insertElement(elModal);
        insertElement(elShade);
    };

    var setupStyle = function () {
        // Based on http://stackoverflow.com/a/524721/912236

        var css = hereDoc(function () {
            /*!
#shade, #modal {
		 display: none;
	}
#shade {
		 position: fixed;
		 z-index: 100;
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
	}
#modal {
		 position: fixed;
		 z-index: 101;
		 top: 33%;
		 left: 25%;
	}
#shade {
		 background: white;
		 opacity: 0.5;
		 filter: alpha(opacity=50);
	}
#modal {
        border: 1px solid #BEBEBE;
  ...