JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    
    <label>Foo
        <input id="foofield" value="" />
    </label>
    
    <label>Bar
        <input id="barfield" value="" />
    </label>   
</div>

CSS

.ui-dialog { position: absolute; padding: .2em; width: 300px;
    box-shadow: 0 0 19px #555; -webkit-box-shadow: 0 0 19px #555; -moz-box-shadow: 0 0 19px #555; border: 2px solid red;
}

JavaScript

alert('jo');

$('#foofield').click(function(e) {
alert('j');    
var $box = $('<div class="box" />').html('In dialog');
    var xpos = $(this).position().left;
    var ypos = $(this).position().top + 20;
    //console.log(xpos);
    $box.dialog({
        position: [xpos, ypos],
        close: function() {
            $(this).dialog('destroy');
        }
    }).mouseleave(function() {
        $(this).dialog('close');
    });
});