JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>
<div class="cel">
    Some text
</div>

<div id="pop">
    show this
</div>

CSS

.cel{
    background: #DDD;
    height: 50px;
    Width: 200px;
    margin-bottom: 10px;
    cursor: pointer;

}
#pop{
width: 100px;
    height: 50px;
    background: #222;
    color: #fff;
    position: absolute;
    z-index: 999;
    top: 10px;
    left: 200px;
    
}

JavaScript

$(document).ready(function(){

    $('.cel').click(function(){
        $(this).zFn('#pop');
    });

});

$.fn.zFn = function(pop){

    var pos = $(this).offset();
    var w = $(this).width();
    var h = $(this).height();
    
    var L = w + pos.left;
    var T = h + pos.top;
    
        $(pop).show().css({top: T, left: L, position: 'absolute'});
    
    console.log(pos.top);
    console.log(pos.left);
    console.log(w);
    console.log(h);
    console.log(L);
    console.log(T);
}