JSFiddle - React, Tailwind, and code Playground

by Robert Barros

HTML

<div id="myContainer">
    <div class="prod4">
        <a href="#" class="prodTxt4">LOG IN</a>
    </div>
    <div class="txt4">
    </div>
</div>

CSS

.txt4 {
    position:absolute;
    z-index:99999;
    top:135px;
    left:275px;
    width: 200px;
    height: 200px;
    background-color: red;
}

JavaScript

$(document).ready(function (e) {
    $(".prod4").mouseenter(function (e) {
        $(".txt4").show("slide", {
            direction: "right"
        }, 200);
       
    });
    $(".prod4").mouseout(function (e) {
        $('.txt4').hide("slide", {
            direction: "right"
        }, 200);
       
    });
});