JSFiddle - React, Tailwind, and code Playground

by rabelais

HTML

<div class="nav-rotate-a" id="menu">
<a href="#">WORK</a>
</div>

<div class="nav-rotate-b" id="contact">
<a href="#">CONTACT</a>
</div>

<div class="hidden" id="contact-info">
<a href="mailto:contact@me.com">CONTACT@ME.COM</a>
</div>

<div class="hidden" id="work-menu">
<ul>
<li id="black"><a href="#">BLACK</a></li>
<li id="dust"><a href="#">DUST</a></li>
</ul>
</div>

CSS

.hidden {
    display: none;
}
#contact {
	right: -5px;
	bottom: 86px;
}
#contact-info {
	position: fixed;
	bottom: 37px;
	right: 72px;
	font-size: 24px;
}
#work-menu {
	position: fixed;
	bottom: 37px;
	left: 65px;
	font-size: 24px;
	width: 150px;
	z-index: 1;
}
#work-menu ul{  /*added*/
    float:right;
}
#work-menu li {
	display: inline;
	margin-right: 9px;
}
#work-menu a:hover {
	border-bottom: 3px solid;
	padding-bottom: 2px;
}
#menu {
	bottom: 67px;
	left: 9px;
}
.nav-rotate-a {
	position: fixed;
	color: #ffffff;
	font-size: 24px;
	/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.nav-rotate-b {
	position: fixed;
	color: #ffffff;
	font-size: 24px;
	/* Safari */
-webkit-transform: rotate(+90deg);

/* Firefox */
-moz-transform: rotate(+90deg);

/* IE */
-ms-transform: rotate(+90deg);

/* Opera */
-o-transform: rotate(+90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

JavaScript

$('#contact').click(function() {
    $('#contact-info').animate({width: 'toggle'});
	$('#work-menu').fadeOut('100');
});
$('#menu').click(function() {
    $('#work-menu').animate({width: 'toggle'});
	$('#contact-info').fadeOut('100');
});