JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blackbox">
    <div id="blacktxt">
    Navigation
    </div>
</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;
    transition: all 2s;
}
	

#blackbox:hover {
    opacity: 0.8;
    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;
}

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

@-webkit-keyframes mymove1  
{
0%  {width:100px;}
100% {width:800px;}
}
	 */