Project action

<div class="bg-ui-light">

    <div class="flex gap-5">

        <div class="grid md:mt-2.5">

            <div class="grid grid-rows-[1fr_30px_1fr]">

                <span class="flex-1 mx-auto"></span>

                <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

            </div>

            <div class="grid grid-rows-[1fr_30px_1fr]">

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

            </div>

            <div class="grid grid-rows-[1fr_30px_1fr]">

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

            </div>

            <div class="grid grid-rows-[1fr_30px_1fr]">

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

            </div>

            <div class="grid grid-rows-[1fr_30px_1fr]">

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

            </div>

            <div class="grid grid-rows-[1fr_30px_1fr]">

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                <span class="block h-7.5"><?= icon('label-check-success-colored', 'w-7.5'); ?></span>

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

            </div>

            <div class="grid grid-rows-[1fr_30px_1fr]">

                <span class="flex-1 mx-auto w-0.5 bg-ui"></span>

                <div class="bg-ui block h-7.5 rounded-full flex justify-center items-center">

                    <span class="w-1 h-1 rounded-full bg-white"></span>

                </div>

                <span class="flex-1 mx-auto"></span>

            </div>

        </div>

        <div class="flex-1 grid gap-2">

            <div class="bg-white md:px-9 px-4 py-4.5 flex md:flex-row flex-col md:items-center gap-2 rounded-tl-button rounded-tr-button justify-between">

                <div>

                    <div class="text-sm text-text-light font-semibold">Révision</div>

                    <div class="text-xxs text-icon font-medium">Mars 2023</div>

                </div>

                <button class="btn btn-secondary-grey-light btn-pill text-xxs w-fit">Voir</button>

            </div>

            <div class="bg-white md:px-9 px-4 py-4.5 flex md:flex-row flex-col md:items-center gap-2 justify-between">

                <div>

                    <div class="text-sm text-text-light font-semibold">Changement des plaquettes de frein</div>

                    <div class="text-xxs text-icon font-medium">Juin 2022</div>

                </div>

                <button class="btn btn-secondary-grey-light btn-pill text-xxs w-fit">Voir</button>

            </div>

            <div class="bg-white md:px-9 px-4 py-4.5 flex md:flex-row flex-col md:items-center gap-2 justify-between">

                <div>

                    <div class="text-sm text-text-light font-semibold">Changement des plaquettes de frein</div>

                    <div class="text-xxs text-icon font-medium">Juin 2022</div>

                </div>

                <button class="btn btn-secondary-grey-light btn-pill text-xxs w-fit">Voir</button>

            </div>

            <div class="bg-white md:px-9 px-4 py-4.5 flex md:flex-row flex-col md:items-center gap-2 justify-between">

                <div>

                    <div class="text-sm text-text-light font-semibold">Changement des plaquettes de frein</div>

                    <div class="text-xxs text-icon font-medium">Juin 2022</div>

                </div>

                <button class="btn btn-secondary-grey-light btn-pill text-xxs w-fit">Voir</button>

            </div>

            <div class="bg-white md:px-9 px-4 py-4.5 flex md:flex-row flex-col md:items-center gap-2 justify-between">

                <div>

                    <div class="text-sm text-text-light font-semibold">Changement des plaquettes de frein</div>

                    <div class="text-xxs text-icon font-medium">Juin 2022</div>

                </div>

                <button class="btn btn-secondary-grey-light btn-pill text-xxs w-fit">Voir</button>

            </div>

            <div class="bg-white md:px-9 px-4 py-4.5 flex md:flex-row flex-col md:items-center gap-2 justify-between">

                <div>

                    <div class="text-sm text-text-light font-semibold">Changement des plaquettes de frein</div>

                    <div class="text-xxs text-icon font-medium">Juin 2022</div>

                </div>

                <button class="btn btn-secondary-grey-light btn-pill text-xxs w-fit">Voir</button>

            </div>

            <div class="bg-white md:px-9 px-4 py-4.5 flex md:flex-row flex-col md:items-center gap-2 rounded-bl-button rounded-br-button justify-between">

                <div>

                    <div class="text-sm text-text-light font-semibold">Révision de la climatisation</div>

                    <div class="text-xxs text-icon font-medium">Mai 2022</div>

                </div>

                <button class="btn btn-secondary btn-pill text-xxs w-fit">Simuler</button>

            </div>

        </div>

    </div>

</div>