JSFiddle - React, Tailwind, and code Playground

HTML

<div class="extrabox">
			<div class="row clearfix">
				<div class="extra-content tac"><i class="icon-bullhorn first-i"></i>Hey there, you found me! You can use this little area to send a message to your users, lovers & haters! Get Beard For Yourself</div>
				<a href="#" class="icon-bookmark">Open Now</a>
			</div><!-- end row -->
		</div>	<!-- end extrabox -->

CSS

.extrabox {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	width: 100%;
	background: #3C3F5E;
}
.extra-content {
	padding: 32px 16px;
	color: #fff;
	font-size: 12px;
}
a.icon-bookmark {
	display: inline-block;
	position: absolute;
    text-decoration: none;
	right: 50%;
	bottom: -32px;
	font-size: 32px;
	color: #3C3F5E;
	z-index: 99;
}

JavaScript

var DropHeight = jQuery('.extrabox').outerHeight();
	var Dt = jQuery('.extrabox');
	jQuery('.extrabox').css("top","-"+DropHeight+"px");
	jQuery('.icon-bookmark').toggle(function(e) {
		$Dt.animate({'top': 0}, {duration: '800', easing: 'easeInOutExpo'});
	}, function() {
		$Dt.animate({'top': -DropHeight}, {duration: '800', easing: 'easeInOutExpo'});
	});