JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <div class="test-close">Test</div>
</div>

CSS

#test {
    width: 300px;
    height: 100px;
    background-color: #ccc;
    position: fixed;
    bottom: 0;
    right: 20px;
    transition: all 0.2s;
}

.test-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background-color: #000;
    text-indent: -9999px;
}

.test-open {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    background-color: #CE312F; 
    text-indent: -9999px;
}

JavaScript

function test() {

	var badge = document.getElementById('test');
	var close_button = document.querySelector('.test-close');
    
	close_button.addEventListener("click", close_box);

	function close_box() {
		badge.style.bottom = '-70px';
		close_button.classList.add("test-open");
		close_button.classList.remove("test-close");
		var open_button = document.querySelector('.test-open');
		open_button.addEventListener("click", open_box);
	}

	function open_box() {
		badge.style.bottom = '0';
		close_button.classList.remove("test-open");
		close_button.classList.add("test-close");
	}

}
window.onload = test;