JSFiddle - React, Tailwind, and code Playground

HTML

<div class="callout"><div id="closecallout"><a href="javascript:void(0);"></a></div></div>

CSS

.callout { 
	display:block;
	background:#000 url('images/calloutback.png') top left repeat-y;
	padding:10px 30px;
	width:auto;
	width:230px;
	height:300px;
	margin:0px;
	position:absolute;
	z-index:1000;
	top:20px;
	right:0;
	border-radius:20px 0px 0px 20px;
	-moz-box-shadow:    0px 0px 20px #333;
	-webkit-box-shadow: 0px 0px 20px #333;
	box-shadow:         0px 0px 20px #333;
}
.callout ul { list-style:none; margin:0px; padding-left:30px;border-left:2px #d61d7d solid; } 

#closecallout { float:right;margin:0px; padding:0px; height:20px; width:20px; }
#closecallout a:link, #closecallout a:visited { margin:0px; padding:0px; display:block; height:20px; width:20px; overflow:hidden; background: #fff; }
#closecallout a:hover { background:#eee; }

JavaScript

jQuery(function($){			
		
		//CALLOUT
		$('#closecallout').click(function() {
			$('.callout').animate({"right" : "-260px"}, 500).addClass('calloutclosed');
		});
		$('.calloutclosed').hover(function() {
			$(this).animate({"right" : "0px"}, 500);
		}, function() {
			$(this).animate({"right" : "-260px"}, 500);
		});
		
	});