JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<nav id="nav-storage" class="Navigation">
			  
			  <section class="Navigation--collapsed">
				<div class="BurgerMenu"></div>
			  </section>
			</nav>

CSS

.BurgerMenu {
    position: relative;
    left: 6px;
    top: 26px;
    width: 25px;
    
    border-bottom:2px solid #979797;
}

.BurgerMenu:before {
    transition: all 0.25s;
    content: "";
    position: absolute;
    left: 0;
    top: -0.5em;
    height: 2px;
    width: 25px;
    background: #979797;
}
.BurgerMenu:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0.5em;
    height: 2px;
    width: 25px;
    background: #979797;
    transition: all 0.25s;
}

.BurgerMenu:hover:after,
.BurgerMenu:hover,
.BurgerMenu:hover:before{
	background: #000;
}