JSFiddle - React, Tailwind, and code Playground

HTML

<a href="/" class="open-block"><span>открыть чат</span></a>
<div class="hide-block"><span>закрыть</span></div>

CSS

.open-block {
    position: absolute;
    top: 50%; right: 0;
    background: #000;
    display: inline-block;
    color: #fff;
    padding: 20px;
    font-size: 24px;
    text-decoration: none;
}

.open-block span {
    
}

.hide-block {
    width: 200px;
    height: 250px;
    background: green;
    position: absolute;
    bottom: 20px; right: 0;
    display: none;
}

.hide-block span {
    color: #fff;
    display: inline-block; 
}

.hide-block span:hover {
    cursor: pointer;
}

JavaScript

$(document).ready(function(){

    $('.open-block').click(function(){
    
        $(this).hide();
        
        $('.hide-block').show();
        
        return false;
        
    });
    
    $('.hide-block span').click(function(){
    
        $(this).parent().hide();
        
        $('.open-block').show();
        
    });
    
});