JSFiddle - React, Tailwind, and code Playground

HTML

<body style="border: 1px solid black;">
        <div id="d0" style="border: 1px solid black;">drag files onto this page</div>
        <div id="d1" style="border: 1px solid black; display: none; background-color: red;">-&gt; drop here &lt;-</div>
        <div id="d2" style="border: 1px solid black;">and stuff will happen</div>
        <div style="float: left;">mouse them all over&nbsp;</div>
        <div style="float: left;">these elements</div>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <div>end page</div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        var resetTimer;

        var reset = function()
        {
            $('#d1').hide();
        };

        var f = function(e)
        {
            var srcElement = e.srcElement? e.srcElement : e.target;

            if ($.inArray('Files', e.dataTransfer.types) > -1)
            {
                e.stopPropagation();
                e.preventDefault();

                e.dataTransfer.dropEffect = (srcElement.id == 'd1') ? 'copy' : 'none';

                if (e.type == "dragover")
                {
                    if (resetTimer)
                    {
                        clearTimeout(resetTimer);
                    }
                    $('#d1').show();
                    console.info('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' + srcElement.id + '">\n\ne.dataTransfer.types is ' + e.dataTransfer.types + '\n\ne.dataTransfer.files.length is ' + (e.dataTransfer.files ? e.dataTransfer.files.length : 0));

                }
                else if (e.type == "dragleave")
                {
                    resetTimer = window.setTimeout(reset, 25);
                }
                else if (e.type == "drop")
                {
                    reset();
                    alert('dropped on <' + srcElement.tagName.toLowerCase() + ' id="' +...