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 button = document.querySelector('#test div');
    
	button.addEventListener("click", toggle_box);

	function toggle_box() {
        if(badge.style.bottom == '-70px') {
            badge.style.bottom = '-0';
            toggleClass("test-close", "test-open");
        } else {
            badge.style.bottom = '-70px';
            toggleClass("test-open", "test-close");
        }
	}
    
    function toggleClass(add, remove) {
    	button.classList.add(add);
        button.classList.remove(remove);
    }

}
window.onload = test;