JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<a href="#nav" id="menu">Menu</a>

CSS

#menu {
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 80px;
    position: relative;
    width: 80px;
}
#menu::after,
#menu::before {
    background-color: red;
    content: '';
    display: block;
    height: 20px;
    position: absolute;
    top: 30px;
    transition-duration: 0.2s, 0.4s;
    transition-property: opacity, transform;
    width: 80px;
}
#menu::before {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
}
#menu:hover::after {
    opacity: 0;
}
#menu:hover::before {
    background-color: green;
    transform: rotate(180deg);
}