JSFiddle - React, Tailwind, and code Playground

by nickaknudson

HTML

<button onclick="setTimeout(del,0);">DEL</button>

<div>
    Foo
    <div>
        Bar
        <ul>
            <li>A ...</li>
            <li>B ...</li>
            <li>C ...</li>
            <li>D ...</li>
            <li>E ...</li>
            <li>F ...</li>
            <li>G ...</li>
            <li>H<br/>...<br/></li>
            <li>I ...</li>
            <li>J ...</li>
            <li>K<br/>...</li>
            <li>L<br/>...<br/><br/></li>
            <li>M ...</li>
            <li>N ...</li>
            <li>O ...</li>
            <li>P ...</li>
            <li>Q ...</li>
            <li>R ...</li>
            <li>S ...</li>
            <li>T ...</li>
            <li>U ...</li>
            <li>V ...</li>
            <li>W ...<br/><br/></li>
            <li>X ...</li>
            <li>Y ...</li>
            <li>Z ...<br/><br/><br/><br/></li>
            
            <li>A ...</li>
            <li>B ...</li>
            <li>C ...</li>
            <li>D ...</li>
            <li>E ...</li>
            <li>F ...</li>
            <li>G ...</li>
            <li>H ...</li>
            <li>I ...</li>
            <li>J ...</li>
            <li>K ...</li>
            <li>L ...</li>
            <li>M ...</li>
            <li>N ...</li>
            <li>O ...</li>
            <li>P ...</li>
            <li>Q ...</li>
            <li>R ...</li>
            <li>S ...</li>
            <li>T ...</li>
            <li>U ...</li>
            <li>V ...</li>
            <li>W ...</li>
            <li>X ...</li>
            <li>Y ...</li>
            <li>Z ...</li>
            
            <li>A ...</li>
            <li>B ...</li>
            <li>C ...</li>
            <li>D ...</li>
            <li>E ...</li>
            <li>F ...</li>
            <li>G ...</li>
            <li>H ...</li>
            <li>I ...</li>
            <li>J ...</li>
            <li>K ...</li>
            <li>L ...</li>
            <li>M ...</li>
            <li>N ...</li>
            <li>O ...</li>
     ...

JavaScript

function del() {
    var cursor = document.body.style.cursor;
    document.body.style.cursor = "crosshair";
    var overlay = document.createElement('div');
    var style = 'border:1px solid #3280FF;background-color:rgba(50,128,255,0.5);position:absolute;z-index:999999999999999;display:none;';
    var pointer = 'pointer-events:none;';
    var transition = 'transition:width 60ms,height 60ms,left 60ms,top 60ms;';
    style += pointer+'-webkit-'+pointer+'-moz-'+pointer;
    style += transition+'-webkit-'+transition+'-moz-'+transition;
    overlay.setAttribute('style',style);
    document.body.appendChild(overlay);
    var overNode = null;
    var over = function (event) {
        var node = event.target;
        if (node !== overNode && node.parentNode) {
            var rect = node.getBoundingClientRect();
            var docElem = document.documentElement;
            var body = document.body;
            var clientTop  = docElem.clientTop  || body.clientTop  || 0;
            var clientLeft = docElem.clientLeft || body.clientLeft || 0;
            var scrollTop  = window.pageYOffset || docElem.scrollTop  || body.scrollTop;
            var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
            var x = (scrollLeft - clientLeft) + rect.left - 1;
            var y = (scrollTop - clientTop) + rect.top - 1;
            overlay.style.display = 'block';
            overlay.style.left = x+'px';
            overlay.style.top  = y+'px';
            overlay.style.width  = rect.width+'px';
            overlay.style.height = rect.height+'px';
            overNode = node;
        }
    };
    var killer = function (event) {
        document.body.style.cursor = cursor;
        if (event.target.parentNode) event.target.parentNode.removeChild(event.target);
        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
        window.removeEventListener('click', killer, false);
        window.removeEventListener('mouseover', over, false);
 ...