JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mobile-nav-toggle">
    <span></span>
</div>

CSS

.mobile-nav-toggle {
    height: 50px;
    width: 35px;
    margin-right: 31px;
    background: #ddd;
    display: flex;
    align-items: center;
    cursor: pointer; 
 
 }
    .mobile-nav-toggle span,
    .mobile-nav-toggle span::before,
    .mobile-nav-toggle span::after {
        border-radius: 2px;
        content: "";
        display: block;
        height: 6px;
        width: 100%;
        background: blue;
        position: relative; 
  }
    .mobile-nav-toggle span::before {
        top: 11px; }
    .mobile-nav-toggle span::after {
        bottom: 17px; }
        .mobile-nav-toggle:hover span,
        .mobile-nav-toggle:hover span::before,
        .mobile-nav-toggle:hover span::after {
            background: rgba(0, 0, 0, 0.8); }