JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/bootstrap@5/dist/js/bootstrap.min.js"></script>
<input type="checkbox" id="PrimaryMenuTrigger">

<header id="Header">
    <div id="HeaderInside" class="container">
    
       <a id="HeaderLogo" href="#">LOGO</a>
       
       <label id="HeaderHamburger" class="hamburger" for="PrimaryMenuTrigger">
           <span class="hamburger-lines"></span>
           <span class="hamburger-label">Menu</span>
       </label>
       
       <div id="HeaderMenu">
           <ul class="menu">
               <li><a href="#item-1">Item 1</a></li>
               <li><a href="#item-2">Item 2</a></li>
               <li><a href="#item-3">Item 3</a></li>
               <li><a href="#item-4">Item 4</a></li>
               <li><a href="#item-5">Item 5</a></li>
           </ul>
       </div>
       
    </div>
</header>

SCSS

body {
    height: 3000px;
}

#Header {
    background-color: #333;
    color: #f6f6f6;
    position: sticky;
    top: 0;
}

#HeaderInside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    padding: 1rem;
}

/* Hamburger */
.hamburger {
    position: relative;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    
    .hamburger-lines {
        width: 30px;
    }
    
    .hamburger-lines::before,
    .hamburger-lines::after {
        content: '';
    }
    
    .hamburger-lines,
    .hamburger-lines::before,
    .hamburger-lines::after {
        display: block;
        background: #fff;
        height: 3px;
    }

    .hamburger-label {
        
    }
}

.menu {
    display: flex;
    column-gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}