JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<header class="header">
    <div class="container">
        <section class="wrapper">
            <div class="header-item-left">
                <a href="./index.html" class="brand">
                    <picture>
                        <source media="(max-width:766px)" srcset="/header-footer/img/logo-mob.webp">
                        <img src="/header-footer/img/logo.webp" alt="Logo Generasi Maju" title="Logo Generasi Maju" loading="lazy">
                    </picture>
                </a>
            </div>
            <!-- Navbar Section -->

            <div class="menu-bar__top o-0">
                <div class="search-input">
                    <input type="text" class="form-control" placeholder="Cari di Generasi Maju">
                    <button class="click-search">
                      <i class="fa fa-search color-red" aria-hidden="true"></i>
                  </button>
                </div>
                <!-- login section button -->
                <div class="isLogin" style="display: none;">
                    <a href="#">
                        <button class="btn btn-secondary">
                          <img src="/header-footer/img/user-red.png" class="inline" alt="user red" title="user red" loading="lazy">
                          Masuk
                          <img src="/header-footer/img/arrow-down.svg" class="inline" alt="arrow down" title="arrow down" loading="lazy">
                      </button>
                        <div class="sgm-card akun-check">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="font-bold color-red">Klub Generasi Maju</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="font-bold color-red">Keluar</div>
                   ...

SCSS

// Header
.header {
    section {
        padding: 0;
    }
    h2 {
        font-size: 20px;
        margin: 0;
    }
    .inline {
        display: inline;
    }
    .container {
        max-width: 75rem;
        height: auto;
        margin: 0 auto;
        padding: 0 1.25rem;
    }
    .search {
        &__section {
            display: none;
            position: fixed;
            top: 0;
            z-index: 120;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba($color: #000000, $alpha: 1);
            animation: 0.5s ease 0s 1 normal forwards running slideLeft;
            .menu-mobile-header {
                display: flex;
                background: white;
            }
        }
        &__input {
            position: relative;
            input {
                border-radius: 25px;
                padding-right: 42px;
            }
            i {
                position: absolute;
                right: 16px;
                top: 8px;
            }
        }
        &__total {
            font-family: 'VAG-Rounded-BT';
        }
        &__found {
            margin: 8px 0 16px;
        }
        &__autocomp {
            display: none;
        }
        &__populer {
            .all {
                .taging {
                    &__name {
                        background: #F2F0ED;
                        color: $red;
                        padding: 8px 16px;
                        border-radius: 25px;
                        margin: 8px 0;
                        width: fit-content;
                    }
                }
            }
        }
    }
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    z-index: 100;
    background: var(--color-white);
    box-shadow: var(--shadow-medium);
    @include breakpoint (mobile) {
        padding: 0;
    }
    .wrapper {
        display: flex;
        flex-direction:...