Project item

<div class="flex flex-col gap-5 bg-white rounded-button p-5 w-full">

    <div class="flex flex-col">

        <span class="text-xl font-semibold">Audi Q3 Sportback</span>

        <span class="text-sm">Advanced 35 TFSI 6-vitesses</span>

    </div>

    <div class="flex gap-10 bg-ui-light p-5 rounded-button">

        <div class="flex flex-col gap-2 text-sm text-text-light">

            <div class="flex gap-3.5">

                <?= icon('energy', 'w-4 text-icon'); ?>

                <span>Essence</span>

            </div>

            <div class="flex gap-3.5">

                <?= icon('transmission', 'w-4 text-icon'); ?>

                <span>Manuel</span>

            </div>

            <div class="flex gap-3.5">

                <?= icon('mileage', 'w-4 text-icon'); ?>

                <span>25 000km</span>

            </div>

            <div class="flex gap-3.5">

                <?= icon('valide', 'w-4 text-icon'); ?>

                <span>02/2020</span>

            </div>

        </div>

    </div>

    <div class="text-icon flex gap-3">

        <?= icon('bluetooth', 'w-auto h-4.5'); ?>

        <?= icon('apple', 'w-auto h-4.5'); ?>

        <?= icon('recul-radar', 'w-auto h-4.5'); ?>

        <?= icon('air-conditioning', 'w-auto h-4.5'); ?>

        <?= icon('leather', 'w-auto h-4.5'); ?>

        <?= icon('regulator', 'w-auto h-4.5'); ?>

    </div>

   <div class="text-secondary flex flex-col gap-4 pt-5 border-t-1">

       <span class="text-smaller font-semibold">54 500 €</span>

       <div class="flex gap-2">

           <button class="btn btn-secondary btn-pill text-xxs">Télécharger</button>

           <button class="btn btn-secondary btn-pill text-xxs">Voir</button>

           <button class="btn btn-secondary btn-pill text-xxs">Dupliquer</button>

       </div>

   </div>

</div>

<div class="flex flex-col gap-5 bg-white rounded-button p-5 w-full">

    <div class="flex flex-col">

        <span class="text-xl font-semibold">Audi Q3 Sportback</span>

        <span class="text-sm">Advanced 35 TFSI 6-vitesses</span>

    </div>

    <div class="flex flex-col gap-4 pt-5 border-t-1">

        <div class="flex flex-col">

            <span class="text-sm text-text-light">Estimation rapide:</span>

            <span class="text-smaller font-semibold text-secondary">54 500 €</span>

        </div>

        <button class="btn btn-secondary btn-full-width">Faire une estimation précise</button>

    </div>

</div>

<div x-data="dropdown(true)" class="w-full p-5 flex flex-col gap-2 rounded-bl-button bg-white">

    <div @click="toggle()"

         class="flex justify-between font-semibold cursor-pointer">

        <div class="flex gap-2">

            <?= icon('draining', 'text-icon w-10'); ?>

            <div class="flex flex-col">

                <span class="md:text-lg text-base">Révision des 15000 km</span>

                <span class="text-sm font-medium">Sur votre BMW I3</span>

            </div>

        </div>

        <span>

            <span x-show="!open">

                <?= icon('plus', 'w-3 text-icon') ?>

            </span>

            <span x-show="open">

                <?= icon('minus', 'w-3 text-icon') ?>

            </span>

        </span>

    </div>

    <div x-ref="content" class="p-5 bg-ui-light dropdown-content hidden rounded-button overflow-hidden">

        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

        The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',

        making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,

        and a search for 'lorem ipsum' will uncover many web sites still in their infancy.

        Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

    </div>

</div>

<div x-data="dropdown(true)" class="w-full p-5 flex flex-col gap-2 border-4 border-text rounded-bl-button bg-white">

    <div @click="toggle()"

         class="flex justify-between font-semibold cursor-pointer">

        <div class="flex gap-2">

            <?= icon('draining', 'text-icon w-10'); ?>

            <div class="flex flex-col">

                <span class="md:text-lg text-base">Révision des 15000 km</span>

                <span class="text-sm font-medium">Sur votre BMW I3</span>

            </div>

        </div>

        <span>

            <span x-show="!open">

                <?= icon('plus', 'w-3 text-icon') ?>

            </span>

            <span x-show="open">

                <?= icon('minus', 'w-3 text-icon') ?>

            </span>

        </span>

    </div>

    <div x-ref="content" class="p-5 bg-ui-light dropdown-content hidden rounded-button overflow-hidden">

        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

        The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',

        making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,

        and a search for 'lorem ipsum' will uncover many web sites still in their infancy.

        Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

    </div>

</div>