JSFiddle - React, Tailwind, and code Playground

by SpacePineapple

HTML

<div class="sketchy_templates_container"><div><div>
    I am not a <div>table</div>s sda das ld;aksdkal;dk as;dk ;slsa;l dka;lsd ks;d k;lkd dasl;d kl;sdkl;aksd;las;dask;lkas;ld kasld askdlakdkalsdas;ldka;lsdk;asldkls;d</div></div><div><table border="1"> <tbody><tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody></table></div><button>apply!</button></div>

CSS

div.sketchy_templates_container > div
{
    position:relative;
    display:inline-block;
    width:100px !important;
    height:100px !important;
    margin:10px;
    padding:10px;
    border:1px solid black;
    overflow:hidden;
    cursor:pointer;
}
div.sketchy_templates_container > div > *{
    display:table;
}
div.sketchy_templates_container > div > table
{
    width:100%;
    height:100%;
}

JavaScript

function Template(html) {
        this.env = document.createElement("div");
        this.env.innerHTML = html;
        var contentHolders = [];
        function traverse(node) {
            var added = false;
            var len = node.childNodes.length; 
            for (var i = 0; i < len; i++) {
                var child = node.childNodes[i];
                console.log(child);
                if (!added && child.nodeType == 3) {
                    contentHolders.push(node);
                    added = true;
                } else
                    traverse(child);
            }
            if (node.childNodes.length == 0)
                contentHolders.push(node);
        }
        traverse(this.env);
        console.log(contentHolders);
    }

Template('<div style="background-color: #f2f2f2; border-radius: 20px; padding: 20px; box-shadow: 0px 0px 10px; display: block;"><span></span></div>')