JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<input type="checkbox" class="menu-toggler-status" id="menu-toggler-status">

<br>

<label class="menu-toggler" for="menu-toggler-status">
    <span class="menu-toggler-lines"></span>
    <span class="menu-toggler-label" hidden>Menu</span>
</label>

SCSS

:root {
    --menu-toggler-font-size: 2rem;
    --menu-toggler-color: currentColor;
    --menu-toggler-gap: 0.4em;
    --menu-toggler-line-width: 1.2em;
    --menu-toggler-line-height: 0.125em;
    --menu-toggler-line-radius: 0.125em;
    --menu-toggler-line-gap: 0.35em;
}

.menu-toggler {
    font-size: var(--menu-toggler-font-size);
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: var(--menu-toggler-gap);
    min-height: calc((var(--menu-toggler-line-gap) * 2) + (var(--menu-toggler-line-height) * 2));
    
    .menu-toggler-status:checked ~ & {        
        .menu-toggler-lines {
            background-color: transparent;
        }
        
        .menu-toggler-lines::before {
            transform: rotate(45deg);
        }

        .menu-toggler-lines::after {
            transform: rotate(-45deg);
        }
    }
}

.menu-toggler-lines {
    width: var(--menu-toggler-line-width);
    height: var(--menu-toggler-line-height);
    background-color: var(--menu-toggler-color);
    position: relative;
    
    &,
    &::before,
    &::after {
        border-radius: var(--menu-toggler-line-radius);
        transition: all 0.2s;
    }
    
    &::before,
    &::after {
        position: absolute;
        content: ' ';
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--menu-toggler-color);
    }
    
    &::before {
        transform: translateY(calc(var(--menu-toggler-line-gap) * -1));
    }
    
    &::after {
        transform: translateY(var(--menu-toggler-line-gap));
    }
}