JSFiddle - React, Tailwind, and code Playground

HTML

<script id="dnd">
    function over(e) {
        e.preventDefault();
    }

    function drag(e) {
        e.dataTransfer.setData("text", e.target.dataset.id);
    }

    function drop(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData("text");
        e.target.appendChild(parent.document.querySelector("[data-id='" + data + "']"));
    }
    window.onload = function() {
    var mods = document.querySelector("modules");

var script = document.getElementById("dnd");

var iframe = document.querySelector("iframe");

iframe.src = URL.createObjectURL(
new Blob(["<!doctype html>" + script.outerHTML + mods.outerHTML], {
    type: "text/html"
}))
    }
</script>
<div id="container">
    <ul>
        <li data-id="1" ondragstart="drag(event)" draggable="true">To drop 1</li>
        <li data-id="2" ondragstart="drag(event)" draggable="true">To drop 2</li>
    </ul>
</div>
<modules ondrop="drop(event)" ondragover="over(event)">
    <module>Element</module>
    <module>Element</module>
    <module>Element</module>
    <style>
        module, li {
            border:1px solid #000;
            display:block;
            list-style:none;
            margin:0;
            padding:5px;
        }
    </style>
</modules>
<iframe src=""></iframe>

CSS

foo, bar, module, li, div, ul, iframe > module {
    border:1px solid;
    display:block;
    list-style:none;
    margin:0;
    padding:5px;
}
body > * {
    padding:0;
    border:0;
}
modules {
    display:none;
}