JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<body>
    <header>
        <div class="menu-icon">
            <span></span>
        </div>
    </header>
</body>

CSS

html, body {
    background:#333;
    padding:0;
    margin:0;
}

header {
    background-color:#157a26;
    position:relative;
    height:65px;
}

.menu-icon {
    border-radius:50%;
    background-color:#000;
    position:absolute;
    top:50%;
    left:50%;
    width:54px;
    height:54px;
    transform:translateX(-50%) translateY(-50%);
}

span {
    width:50%;
    height:2px;
    background-color:#fff;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%);
}

span::before, span::after {
    content:'';
    background-color:#fff;
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:2px;
    transform: translateY(-8px);
    }

span::after {
    transform: translateY(8px);
}