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="radio" /><br />More text...
    </div>
</p>
<p>
<label for="example2">Text2:</label>
<input id="example2" name="example2" type="text" maxlength="100" />
</p>
<iframe src='http://google.com'></iframe>

CSS

.example{
 background: gray;   
}

JavaScript

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