JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blackbox"/>
    <div id="blacktxt">
    Navigation
    </div>

CSS

#blackbox {
background: black; 
width: 100px; 
height: 80px; 
color: white; 
text-align: center; 
font-family: Times; 
font-size: 20px;
position: fixed;
left: 0px;
bottom: 100px;
opacity: 0.5;
margin-bottom: 10px;
}
	

#blackbox:hover {
opacity: 0.8;
width: 800px;
animation:mymove1 5s;
-webkit-animation:mymove1 2s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-out;
}

@keyframes mymove1{
0%  {width:100px;}
100% {top:800px;}
}

@-webkit-keyframes mymove1 /* Safari and Chrome */
{
0%  {width:100px;}
100% {width:800px;}
}
	
#blacktxt {
margin-top: 10px;
height: 60px;
transition: opacity 0.5s, width 5s;
position: absolute;
font-family: cursive;
cursor: default;
}

#blacktxt:hover {
opacity: 0;
}