JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <button class="testModesToggle">
          Test
    </button>
</div>
<div id="testModes" style="display: none;">
    <div>
      <h3>Test</h3>
      <p>Lorem lorem.</p>
     </div>

     <div class="toggle">
      <button class="testModesToggle" >X Close</button>
     </div>
</div>

CSS

#testModes {
	padding-top: 10%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
    background: black;
    color: white;
	.toggle {
		padding-bottom: 30px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	-webkit-transition: 0.5s;
	transition: 0.5s;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

#testModes.testModes-active {
	 -webkit-transform: translateY(0);
	 transform: translateY(0);
}

JavaScript

$(document).on('click', '.testModesToggle', function() {
		var state = $('#testModes').attr('class');

		if (state === 'testModes-active') {
			$('#testModes').removeClass('testModes-active').delay(100).fadeToggle();
		} else {
			$('#testModes').fadeToggle(0).addClass('testModes-active');
		}

	});