JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<div id="original">
    <div class="row">
        <div class="col-xs-5">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>
        <div class="col-xs-3">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>
        <div class="col-xs-4">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>        
    </div>
    <div class="row">
        <div class="col-xs-3">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>
        <div class="col-xs-4">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>
        <div class="col-xs-5">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>        
    </div>
    <div class="row">
        <div class="col-xs-8">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>
        <div class="col-xs-2">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>
        <div class="col-xs-2">
            <div class="btn btn-success" onclick="moveup(this)">Move Up</div>
        </div>        
    </div>
</div>

<div id="overlay">
    
</div>

CSS

#original, html, body{
    width: 100%;
    height: 100%;
}

#overlay{
    display:none;
    background: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    position:absolute;
    top: 0;
    left: 0;
}

.row > div{
    text-align: center;
}

JavaScript

var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

function moveup(e){
    $('#overlay').toggle();
    
    if($('#overlay').is(':visible')){
        //store originals
        var original = {
            top: 0,
            left: 0,
            position: 'relative'
        };
        
        var offset = cumulativeOffset(e);
        //$(e).offset() will work 90% of the time
        
        $(e).replaceWith('<i id="swap"></i>');
        offset.position = 'absolute';
        $('#overlay').append(e);
        $(e).css(offset);
        $.data(e, 'originalCSS', original);
    }else{
        $(e).css($.data(e)['originalCSS'])
        $('#swap').replaceWith(e);
        $('#swap').remove();
        $('#overlay').empty();
    }
}