JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
<div id="staff"></div>
	<div id="portal">
		<img id="logo" src="assets/logo.png">
		<div id="buttons">
			<a href="http://forums.galacticmc.net"><div class="button" id="button1"></div></a><a href="http://store.galacticmc.net"><div class="button" id="button2"></div></a><a href="http://galacticmc.net/rules"><div class="button" id="button3"></div></a><p class="button" id="button4" onclick="staff()">Click me</p><a href="http://galacticmc.net/vote"><div class="button" id="button5"></div></a>
		</div>
	</div>
</body>
</html>
<script>
function staff() {
	document.getElementById('staff').innerHTML = `
<div class="popup" onclick="close()"></div><img src="assets/close.png" class="close-icon" onclick="close()"><div class="popup-menu"><a href="http://www.galacticmc.net/staff-application"><img src="assets/apply.png" class="apply"><p>Apply to become a member of staff</p></a><hr><a href="http://galacticmc.net/staff"><img src="assets/staff.png" class="list-staff"><p>View Staff Members</p></a></div>
	`
}

</script>

CSS

.popup {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	position: absolute;
	z-index: 5;
	opacity: 0.5
}
.popup-menu {
	top: 0;
	width: 700px;
	height: 99.6%;
	background-color: #fff;
	position: absolute;
	z-index: 10;
	left:calc(50% - 351px);
	border: 2px solid #808080;
	    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
    padding-left: 20px;
}
.apply {
	width: 350px;
	height: 350px;
	position: relative;
	left: calc(50% - 185px);
}
.popup-menu p {
	color: #009AFF;
	text-align: center;
	font-size: 35px;
}
.popup-menu a {
	text-decoration: none 
}
.list-staff {
	width: 350px;
	height: 350px;	
	position: relative;
	left: calc(50% - 185px);
}
.close {
	position: absolute;
	top: 2px;
	right: 2px;
}
html {
	background-image: url("assets/bg.png");
	background-size: 100%;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
#portal {
	bottom: 0;
	height: 550px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 1000px;
}
#buttons {
  bottom:75px;
  height:200px;
  position:absolute;
  width:1000px;
}

.button {
  background-position:center;
  background-repeat:no-repeat;
  background-size:190px;
  cursor:pointer;
  display:inline-block;
  height:200px;
  transition:background-size .2s ease;
  width:200px;
}

.button:hover {background-size:200px}
.button:active {background-size:180px}

#button1 {background-image:url("assets/forums.png")}

#button2 {background-image:url("assets/store.png")}

#button3 {background-image:url("assets/rules.png")}

#button4 {background-image:url("assets/staff.png")}

#button5 {background-image:url("assets/vote.png")}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
  ...