JSFiddle - React, Tailwind, and code Playground

HTML

<div class='row'>
    <input type='text' />
    <div class="magicbox">
        <a href="http://google.com" class="clicky">Click Me if you can</a>
    </div>
</div>

CSS

.linksdiv .magicbox{
    display:block !important;
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    left:200px;
    top:0px;
}  
.row{
    position:relative;
}

JavaScript

$(".magicbox").css("display","none");

$('input').focus(function(){
    $(this).parents('.row').addClass("linksdiv");
}).blur(function() {
    $(this).parents('.row').removeClass("linksdiv");
});


$('.clicky').mousedown(function(event) {
    window.open("http://google.com");
});