JSFiddle - React, Tailwind, and code Playground

by SLAVOO SLAVOO

HTML

<div class="main">
    <div class="box"></div>
</div>

CSS

.main {
    height: 100px;
    width: 400px;
    position: relative;
    border: 1px solid #000;
}
.box {
    width: 400px;
    height: 200px;
    background: red;
    opacity: 0;
    position: relative;
    top: 200px;
    left: 0;
    display: none;
}

JavaScript

$(document).ready(function () {
    $(".main").hover(function () {
        $(".box").css({
            display: "block"
        });
        $(".box").animate({
            top: "0px",
            opacity: "1"
        }, "slow");
    }, function () {
        $(".box").animate({
            top: "200px",
            opacity: "0"
        }, "slow", function () {
            $(".box").css({
                display: "none"
            });
        });
    });
});