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" id="one" name="example" type="text" maxlength="100" />
</p>
    <div class="tip" id="tip-one">
        Some text...
    </div>

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

CSS

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

JavaScript

$('.example').focusin(function() {
    $('#tip-'+$(this).attr('id')).show();
});
$('div.tip').hide();

$('.example').focusout(function () {
    $('.tip').hide();
});