JSFiddle - React, Tailwind, and code Playground

HTML

<div id="social">
    <div id="block-wrapper">
        <div id="linked-close"></div>
        <div id="linked-block">
            <p>Hoi</p>
            <span class="hidden">
                
            </span>
        </div>
    </div>
</div>

CSS

#social{
    position: fixed;
    top: 80px;
    right:0;
}
#block-wrapper #linked-block{
   	height: 70px;
   	width: 80px;
   	background-color: #0076B7;
   	color: #fff;
   	font-size: 32px;
   	text-align: center;
   	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
}
#social #block-wrapper #linked-block span{
	position: absolute;
	-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
    -ms-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
	width: 364px;
	height: 30px;
	background-color: red;
}
#social #block-wrapper #linked-block span.hidden{
	position: absolute;
	-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
    -ms-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
	width: 364px;
	height: 30px;
	background-color: red;
    right: -370px;
}
#social #block-wrapper #linked-block span.show{
	-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
	-ms-transition: 1s; /* For Safari 3.1 to 6.0 */
    transition: 1s;
   	right: 0;
}
#linked-close{
	position: absolute;
	top: -55px;
	z-index: 999999;
	right:314px;
	width: 46px;
	height: 46px;
	background-color: black;
	font-size: 40px;
    display: none;
}

JavaScript

$(document).ready(function($) {
    $('#block-wrapper').on('click', function(e){
        $("#social #block-wrapper #linked-block span").toggleClass('show');
        $("#linked-close").css("display", "block");
    });
    $('#linked-close').on('click', function(e){
        e.stopPropagation();
        $("#social #block-wrapper #linked-block span").toggleClass('show');
        $("#linked-close").css("display", "none");
    });   
});