JSFiddle - React, Tailwind, and code Playground

by Persio

HTML

<div class='foo'>1</div>
<div class='foo'>2</div>
<div class='foo'>3</div>

<div id='bar'>4</div>

CSS

html {
    margin: 1em;
}
div {
    width: 5em;
    height: 2em;
    margin: .4em;
    padding: .4em;
    cursor: pointer;
}
#bar {
    background: #f00;
    z-index: 999;
}
.foo {
    clear: both;
    background: #ccc;
}

JavaScript

function setStyle(event){
  var foo_top  = $(this).position().top;
  var foo_left = $(this).position().left;
  $('#bar').offset({top: foo_top + event.data.top, left: foo_left + event.data.left});
}

$(function() {
    $('.foo').on('click', {top: 10, left: 10}, setStyle);
});