JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

<br/><Br/>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<ul>

CSS

li {
 display: inline-block;
 float: left;
 padding: 5px;
 border: 1px solid black;    
}

JavaScript

$.fn.highlightBox = function(o) {
    o = o || {};
    o.border = o.border || '3px solid red';
    o.radius = o.radius || '5px';
    o.fade = o.fade || 4000;
        var t = $(this);
        var off = t.offset();
        var pos = {
            w: t.width(),
            h: t.height(),
            x: off.left,
            y: off.top
        };
        var box = $('<div/>').css({
            'position': 'absolute',
            'display' : 'inline-block',
            'top': pos.y + 'px',
            'left': pos.x + 'px',
            'width': (pos.w + 6) + 'px',
            'height': (pos.h + 6) + 'px',
            'margin': '-5px',
            'padding': '5px',
            'border': o.border,
            'border-radius': o.radius
        }).appendTo('body');
        box.click(function() {
            $(this).remove();
        });
        box.fadeOut(o.fade, function() {
            $(this).remove();
        });
};
$('li').click(function(){ 
    $(this).highlightBox();
});