Recent Research Card

<div class="bg-white rounded-button px-3.75 md:px-5 py-3 md:py-4.5 max-w-[250px] md:max-w-[307px] flex flex-col gap-3.75">

    <div class="flex justify-between">

        <span class="font-semibold tracking-tightened">Nom de la recherche</span>

        <?= icon('close', 'text-background w-3.25') ?>

    </div>

    <div class="flex flex-wrap gap-1">

        <div class="text-xxs text-text-light font-medium px-2.5 py-1.25 bg-ui-light rounded-full">Diesel</div>

        <div class="text-xxs text-text-light font-medium px-2.5 py-1.25 bg-ui-light rounded-full">Automatique</div>

        <div class="text-xxs text-text-light font-medium px-2.5 py-1.25 bg-ui-light rounded-full">Peugeot</div>

        <div class="text-xxs text-text-light font-medium px-2.5 py-1.25 bg-ui-light rounded-full">2019</div>

    </div>

    <div class="flex justify-between items-center">

        <div class="tracking-tightened text-xs md:text-sm max-w-2/3">Recevoir les nouvelles annonces par email</div>

        <div class="form-element form-checkbox-slider">

            <label for="checkbox">

                <input type="checkbox" id="checkbox" name="checkbox">

                <span class="controler"></span>

            </label>

        </div>

    </div>

    <div class="flex gap-6">

        <button class="text-sm tracking-tightened font-semibold">

            Modifier

        </button>

        <button class="text-sm tracking-tightened font-semibold">

            Rechercher

        </button>

    </div>

</div>