JSFiddle - React, Tailwind, and code Playground

HTML

<a id="slideUp" href="#">Slide Up</a> | <a id="slideDown" href="#">Slide Down</a>

<div id="topBox">Top Box</div>

<div id="bottomBox">Bottom Box</div>

CSS

#topBox {
    width: 200px;
    height: 100px;
    
    background-color: blue;
    margin-bottom: 10px;
}

#bottomBox {
    margin-top: 10px;
    width: 200px;
    height: 100px;
    background-color: green;
}

JavaScript

$('#slideUp').click(function () {
    $('#topBox').slideUp();
});
$('#slideDown').click(function () {
    $('#topBox').slideDown();
});