JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script>
    function giveDirections(obj){  
obj.nextElementSibling.style.display="block"                
    }
    function hideDirections(obj){
    obj.nextElementSibling.style.display="none"
    }
    </script>
    </head>
<body>
    <input id="test" name="test" onfocus="giveDirections(this)" onblur="hideDirections(this)" />
    <div style="display:none">Hi I am some directions</div>
    </body>
</html>