JSFiddle - React, Tailwind, and code Playground

HTML

<a class="open" href=""> Notifications </a>
	
	<div class="wrap">
		<div class="arrow-up">
		</div>
		<div class="box">
			<p> These will be your notifications! </p>
		</div>
	</div>

CSS

.wrap {
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	width: 400px;
}
.arrow-up {
	margin-right: auto;
	margin-left: auto;
	width: 0; 
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;
}
.box {
	height: 500px;
	width: auto;
	background-color: black;
	border-radius: 4px 4px 4px 4px;
	text-align: center;
}
.box p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: helvetica;
	font-size: 16px;
	color: #fff;
	width: 100px;
}

JavaScript

$(document).ready(function() {
	 $('.wrap').hide();
	 $('.open').toggle(
			function() {
				('.wrap').show();
			},
			function() {
				('.wrap').hide();
		  }
		); // end toggle
	}); // end ready