JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
<p class="text">[name]</p>
</div>
<div id="arrow"></div>
<div id="color"></div>

CSS

*{
	padding:0;
	margin:0;
	-webkit-font-smoothing: antialiased;
	font-family:arial;
	text-decoration:none;
	
}
#menu{
	position:absolute;
	width:5px;
	height:100%;
	background:#4d4d4d;
}
.text{
	display:none;
	color:white;
	text-align:center;
	font-size:25px;
}
#arrow{
	width:32px;
	top:0%;
	margin-left:5px;
	position:absolute;
	height:100%;
	background:red;
}
#color{
    position:absolute;
	background:#3399ff;
	width:100px;
	height:100px;
}

JavaScript

$(document).ready(function () {
	$("#menu, #arrow").mouseenter(function () {
		$('#arrow').stop(true, false).fadeOut("fast");
		$("body").children(':not(#menu)').children(':not(#arrow)').css("-webkit-filter", "blur(2px)");
		$("#menu").stop().animate({
			width: "300px"
		}, 300, function () {
			$('.text').fadeIn(200);
		});
	})
    $("#menu").mouseleave(function () {
		$("#menu").stop().animate({
			width: "5px"
		}, 300, function () {
			$('#arrow').stop(true, false).fadeIn("slow");
		});
		$("body").children(':not(#menu)').css("-webkit-filter", "none");
		$('.text').fadeOut(100);
	});
    
    $('#color')
    .css('top','50%')
    .css('left','50%')
    .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
    .css('margin-top','-'+($('#color').outerHeight()/2)+'px');
    
    $(document).bind('resize', function(){
        $('#color')
        .css('top','50%')
        .css('left','50%')
        .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
        .css('margin-top','-'+($('#color').outerHeight()/2)+'px');
    });
   
});