<nav class="bg-white px-4 py-4 dark:bg-slate-800  md:flex md:items-center md:justify-between md:px-6 md:py-4">
    <div class="flex items-center justify-between md:w-2/12">
        <a href="#" class="flex items-center text-xl text-slate-900 dark:text-white md:text-2xl md:font-semibold">
            <img class="mr-3 h-6 md:mt-0 md:h-10" src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656977478/webwinds/logos/dummy-logo_mqh7y4.svg" alt="logo" />
            <p>Companey</p>
        </a>
        <!-- Mobile menu button -->
        <div class="flex md:hidden">
            <button type="button" class="text-slate-900 focus:text-slate-600 focus:outline-none dark:text-slate-400"
                aria-label="toggle menu">
                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                    <path fill-rule="evenodd"
                        d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
                    </path>
                </svg>
            </button>
        </div>
    </div>
    <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
    <div class="w-full md:ml-5 md:flex md:items-center md:justify-between">
        <div></div>
        <div class="mt-5 flex flex-col text-slate-500 md:flex-row md:mt-5">
            <a href="#" class="my-4 mr-10 font-medium text-slate-900 dark:text-white md:my-0">Home</a>
            <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Products</a>
            <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Customers</a>
            <a href="#" class="my-4 mr-10 text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white md:my-0">Articles</a>
        </div>

        <div class="flex cursor-pointer flex-wrap items-center pb-5 md:pb-0">
            <img src="https://res.cloudinary.com/ds4j2pmzp/image/upload/v1656979435/webwinds/avatar/avatar-11_poqavk.jpg" class="h-10 w-10 rounded-full object-cover ring-1" alt="avatar" />
            <div class="pl-2">
                <h3 class="text-base text-slate-900 dark:text-white">
                    Sergio Ramos
                </h3>
                <p class="text-sm text-slate-400">Senior designer</p>
            </div>
        </div>
    </div>
</nav>