JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer"><div class="pointer"></div></div>

<div class="leftside"></div>
<div class="rightside"></div>

CSS

.footer{
 width:100%;
 height:80px;
 position:fixed;
    bottom:-60px;
    background:#ff00ff;
 -webkit-transition:all 0.1s linear;
}
.footer:hover{
 bottom:0;   
}
.pointer{position:absolute;top:-20px;height:20px;width:20px;background:#ff00ff;margin-left:-10px;left:50%;}
.footer:hover .pointer{background:#00ffff;}

.leftside{
 width:80px;
 height:100%;
 position:fixed;
    left:-60px;
    background:#ff00ff;
 -webkit-transition:all 0.8s linear;
}
.leftside:hover{
 left:0;   
}

.rightside{
 width:80px;
 height:100%;
 position:fixed;
    right:-60px;
    background:#ffff00;
 -webkit-transition:all 0.8s linear;
}
.rightside:hover{
 right:0;   
}