JSFiddle - React, Tailwind, and code Playground

HTML

<span class="button slide_out">Click me</span>

<div id="testbox">Whohoohoooo, I am slidiiing!<br><br><small>Hey… wait! Why I am not sliding up again?</small></div>

CSS

body {
    font-family: sans-serif;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.button {
    display: block;
    padding: 5%;
    background: rgba(176, 23, 31, 0.6);
    border-radius: 10px;
    text-transform: uppercase;
    border: 2px solid rgba(176, 23, 31, 1);
    max-width: 300px;
    margin: 0 auto;
    cursor: pointer;
}
.button.slide_in {
    background: rgba(205, 198, 115, 0.6);
    border-color: rgba(205, 198, 115, 1);
}
#testbox {
    max-width: 300px;
    margin: 0 auto;
    margin-top: 30px;
    min-height: 200px;
    padding: 5%;
    background: rgba(255, 114, 86, 0.2);
    border: 2px solid rgba(255, 114, 86, 1);
    color: rgba(176, 23, 31, 1);
    display: none;
}

JavaScript

$('.slide_out').on('click', function () {
    $(this).toggleClass('slide_out slide_in');
    $('#testbox').slideToggle();    
});