JSFiddle - React, Tailwind, and code Playground

by Cameron Loveland

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<div class="grid-container">
    
</div>

           
<pre>
    <code class="html">        
        
    </code>
</pre>

CSS

.parent{
    padding:1em;
    border:1px solid #DDD;
    margin:1em;
}

JavaScript

$(document).ready(function () {
    for ( var i = 0; i < 3; i++){
        var divParent = document.createElement('div');
        divParent.className = "parent";
        divParent.innerHTML = "parentContent";
        $('.grid-container').append(divParent);
        
        for ( var j = 0; j < 3; j++){
            var divChildren = document.createElement('div');
            divChildren.className = "child";
            divChildren.innerHTML = "childContent";
            $(divParent).append(divChildren);
        }
    }
    $('.grid-container').clone().appendTo('code');
    
    // must markdown '<' & '>' to prevent html from rendering on page
    var codeToEscape = $('.grid-container').html();
    codeToEscape = codeToEscape.replace(/</g, '&lt;');
    codeToEscape = codeToEscape.replace(/>/g, '&gt;'); //&gt;<br/> - this is better but not the best
    
    $('code').html(codeToEscape.toString().trim());
    
    $('pre code').each(function (i, e) {
        hljs.highlightBlock(e);
    });
});