Tile with svg

<div class="bg-white p-7.5 flex flex-col gap-4 relative w-full overflow-hidden border border-transparent">

    <div>

        <?= icon('transmission', 'w-20 text-primary-accent'); ?>

    </div>

    <div class="flex flex-col gap-4">

        <span class="font-bold text-2xl">Tableau de bord</span>

        <span class="md:text-base text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis cursus...</span>

    </div>

</div>

<div class="bg-white flex items-start md:flex-row flex-col gap-4 relative w-full overflow-hidden border border-transparent">

    <div>

        <?= icon('mobility', 'w-16 text-primary-accent'); ?>

    </div>

    <div class="flex flex-col">

        <div class="xl:items-center item-start font-bold text-2xl leading-6 md:gap-1 flex xl:flex-row flex-col"><span>30</span><span class="md:font-bold font-semibold md:text-2xl text-xl">marques</span></div>

        <span class="md:text-base text-sm">Auto & moto</span>

    </div>

</div>

<div class="bg-white p-7.5 flex flex-col gap-4 w-full relative overflow-hidden border border-transparent">

    <div>

        <?= icon('transmission', 'w-20 text-primary-accent'); ?>

    </div>

    <div class="flex flex-col gap-4">

        <span class="md:text-base text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis cursus...</span>

    </div>

</div>

<div class="bg-white p-7.5 flex flex-col gap-4 relative w-full overflow-hidden border border-transparent" style="box-shadow: -30px 44px 70px -25px rgba(0, 0, 0, 0.09);">

    <div>

        <?= icon('transmission', 'w-20 text-primary-accent'); ?>

    </div>

    <div class="flex flex-col gap-4">

        <span class="md:text-base text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae eros sit amet leo lobortis cursus...</span>

    </div>

</div>