JSFiddle - React, Tailwind, and code Playground

by Vijayakrishnan Krishnan

HTML

<div style="margin: 20px; padding: 20px;">
    <div style="position: relative; height: 30px; width: 60px; padding: 10px;">    
        <pre style="position: relative;">
            <span>Hello</span><span>&nbsp;</span><span>World</span>
        </pre>
    </div>
</div>

<div class="info" style="border: 1px solid #999; padding: 10px;"></div>

CSS

div, pre, span {
    outline: 1px solid green;    
}

JavaScript

$('div, pre, span').click(function(e) {
    e.stopPropagation();
    var x = this.tagName + '<br>'; 
    x += $(this).css('position') + '<br>';
    var o = $(this).offset();
    var p = $(this).position();
    x += 'Offset: ' + o.left + ', ' + o.top + '<br>';
    x += 'Position: ' + p.left + ', ' + p.top + '<br>';    
    $('.info').html(x);
});