Header

<div class="flex items-center">

    <div class="bg-secondary h-[48px] flex gap-5 items-center rounded-r-button w-full md:pl-10 pl-5 text-white">

        <div class="bg-white rounded-full w-9 flex justify-center items-center bg-opacity-20">

            <?= icon('dashboard', 'h-9'); ?>

        </div>

        <span class="lg:text-2.75xl text-xl font-semibold">Tableau de bord</span>

    </div>

    <div class="flex gap-1 justify-end py-5 px-5 md:px-10">

        <button class="btn btn-icon bg-[#1F2D41] opacity-90 w-fit max-h-[48px] flex gap-5">

            <?= icon('chevron-left', 'w-3.5 text-white'); ?>

            <?= icon('copilote', 'w-20'); ?>

        </button>

        <button class="btn btn-icon bg-[#1F2D41] opacity-90 max-w-[48px] aspect-square">

            <?= icon('phone-ring', 'w-6.25 text-white'); ?>

        </button>

        <button class="btn btn-icon bg-[#1F2D41] opacity-90 max-w-[48px] aspect-square">

            <?= icon('calendar-squared', 'w-6.25 text-white'); ?>

        </button>

    </div>

</div>