JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<label for="example">Text:</label>
<input id="example" name="example" type="text" maxlength="100" />
    <div class="example">
        Some text...<br /><input type="checkbox" name="foobar" value="1" /><br />More text...
    </div>
</p>
<p>
<label for="example2">Text2:</label>
<input id="example2" name="example2" type="text" maxlength="100" />
</p>

CSS

.example{
 background: gray;   
}

JavaScript

var fieldExample = $('#example');
$('div.example').css({
    "position":"absolute",
    "left": fieldExample.offset().left,
    "top": fieldExample.offset().top + fieldExample.outerHeight()
});

fieldExample.focus(function() {
    var div = $('div.example').show();
    $(document).bind('focusin.example click.example',function(e) {
        if ($(e.target).closest('.example, #example').length) return;
        $(document).unbind('.example');
        div.fadeOut('medium');
    });
});
$('div.example').hide();