JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vadikom.com/demos/poshytip/src/jquery.poshytip.js"></script>
<link rel="stylesheet" href="http://vadikom.com/demos/poshytip/src/tip-darkgray/tip-darkgray.css">
<p>
<label for="example">Text:</label>
<input class="example" name="example" type="text" maxlength="100" />
    <div class="tip">
        Some text...
    </div>
</p>

<p>
<label for="example">Text:</label>
<input class="example" name="example" type="text" maxlength="100" />
    <div class="tip">
        Some text...
    </div>
</p>

CSS

.tip{
 background: tomato;
 color: #fff;
 padding: 20px;
}

JavaScript

$('.example').focus(function () {
    $('div.tip').hide();
    var i = 0;

    $('.example').each(function () {
        if ($(this).is(":focus")) {
            $($('.tip')[i]).show();
        }
        i++;
    })

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