Table Header with tabs

                                        <section class="py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 tabs">
        <div class="p-4 flex sm:flex-row flex-col gap-5 md:items-center justify-between bg-white rounded-2xl">
            <h5 class="text-gray-900 text-base font-semibold leading-7 flex items-center">Pagedone Employees</h5>
            <!--Switch-->
            <div class="flex gap-4">
                <div class="flex gap-[1px] justify-center items-center bg-gray-100 rounded-md p-1">
                <a href="javascript:void(0)" class="text-gray-900 tab-active:bg-white tab-active:rounded-md rounded-md border-none text-xs font-medium justify-center items-center inline-block text-center transition-all duration-500 py-1.5 px-3 tablink whitespace-nowrap active" data-tab="tabs-with-background-1" role="tab">
                Tab CTA
                </a>
                <a href="javascript:void(0)" class="text-gray-900 tab-active:bg-white tab-active:rounded-md border-none text-xs font-medium rounded-md justify-center items-center inline-block text-center transition-all duration-500 py-1.5 px-3 tablink whitespace-nowrap" data-tab="tabs-with-background-2" role="tab">
                Present
                </a>
                <a href="javascript:void(0)" class="text-gray-900 tab-active:bg-white tab-active:rounded-md border-none text-xs font-medium rounded-md justify-center items-center inline-block text-center transition-all duration-500 py-1.5 px-3 tablink whitespace-nowrap" data-tab="tabs-with-background-3" role="tab">
                    On Leave
                </a>
            </div>
            <div class="relative flex items-center w-[70px] h-8 cursor-pointer">
                <svg class="absolute top-1/2 -translate-y-1/2 left-2 z-50 mr-1.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M2 4.6665H14M4 7.99984H12M6.66667 11.3332H9.33333" stroke="#111827" stroke-width="1.6" stroke-linecap="round"></path>
                </svg>
                <select id="Offer" class="text-gray-900 py-1.5 text-xs cursor-pointer font-medium leading-5 block w-full pr-1.5 pl-7 rounded-md shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] border border-gray-300 appearance-none relative focus:outline-none bg-white transition-all duration-500 hover:bg-gray-50 focus-within:border-gray-300">
                    <option selected="">Filter</option>
                    <option value="Designer">Designer</option>
                    <option value="Researcher">Researcher</option>
                    <option value="Developer">Developer</option>
                </select>
                <svg class="absolute top-1/2 -translate-y-1/2 right-4 z-50 hidden" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.0002 5.99845L8.00008 9.99862L3.99756 5.99609" stroke="#111827" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            </div>
        </div>
        <div id="tabs-with-background-1" role="tabpanel" aria-labelledby="tabs-with-background-item-1" class="tabcontent" style="display: block;">
        </div>
        <div id="tabs-with-background-2" role="tabpanel" aria-labelledby="tabs-with-background-item-2" class="tabcontent" style="display: none;">
        </div>
        <div id="tabs-with-background-3" role="tabpanel" aria-labelledby="tabs-with-background-item-3" class="tabcontent" style="display: none;">
            
        </div>
    </div>
</section>