JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info">
     <h1>Test Info Div</h1>

    <p>This is just a test div that will slide from the right when the mouse i hovered ove the link</p>
</div>
<a href="javascript: void(0);" id="show">Show div on hover</a>

CSS

body{
    overflow-x: hidden;
}
#info {
    width: 350px;
    height: 120px;
    background: #cccccc;
    position: absolute;
    right: -350px;
}

JavaScript

$(function () {
    $("#show").on("mouseover", function () {
        $("#info").animate({
            right: "+=400"
        }, 1000, function () {
            // Animation complete.
        });
    });
    $("#show").on("mouseout", function () {
        $("#info").animate({
            right: "-350px"
        }, 1000, function () {
            // Animation complete.
        });
    });
});