Inputs

<div class="form-element text">

    <input name="name" class="form-input" id="name" type="text" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="name">

        <span>Nom</span>

    </label>

</div>

<div class="form-element text required">

    <input name="name-required" class="form-input" id="name-required" type="text" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="name-required">

        <span>Nom</span>

    </label>

</div>

<div class="form-element text">

    <input name="name-blue" class="form-input form-input--blue" id="name-blue" type="text" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="name-blue">

        <span>Nom</span>

    </label>

</div>

<div class="form-element text error">

    <input name="error" class="form-input" id="error" type="text" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="error">

        <span>Nom</span>

    </label>

</div>

<div class="form-element text">

    <input name="with-icon" class="form-input" id="with-icon" type="text" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="with-icon">

        <span>Nom</span>

    </label>

    <span>

        <?= icon('arrow-right', 'text-icon'); ?>

    </span>

</div>

<div class="field text required">

    <div class="control">

        <input name="name" placeholder="Pas saisi" class="form-input placeholder-purple-lightest placeholder-opacity-75 py-2.5" id="name" type="text" title="Nom">

    </div>

</div>

<div class="form-element text">

    <input name="name" disabled class="form-input" id="name" type="text" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="name">

        <span>Nom</span>

    </label>

</div>

<div class="form-element password" x-data="{ show: false }">

    <input name="password" class="form-input" id="password" type="password" :type="show ? 'text' : 'password'" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="password">

        <span>Mot de passe</span>

    </label>

    <span @click="show = !show">

        <span :class="{'hidden' : show}" >

            <?= icon('password-see', 'text-icon'); ?>

        </span>

        <span :class="{'hidden' : !show}" class="hidden">

            <?= icon('password-unsee', 'text-icon'); ?>

        </span>

    </span>

</div>

<div class="form-element text">

    <input name="newsletter" class="form-input form-input--dark" id="newsletter" type="text" title="Nom" placeholder=" " pattern="\S+">

    <label class="label" for="newsletter">

        <span>Votre adresse e-mail</span>

    </label>

</div>

<div class="form-element text">

    <input name="search" class="form-input form-input--search pr-13" id="search" type="text" title="Nom" placeholder="Marque, modèle ou mot clé" pattern="\S+">

    <span>

        <?= icon('search', 'text-background-dark w-4.5'); ?>

    </span>

</div>

<div class="form-element form-license-plate">

    <label for="license-plate">

        <span class="form-license-plate__decorative">

            <?= icon('european-stars-colored', 'w-5.5'); ?>

            <span>F</span>

        </span>

        <input type="text" id="license-plate" name="license-plate" placeholder="ex BB 466 ZZ...">

        <span class="form-license-plate__decorative">

            <?= icon('flower', 'w-5.5'); ?>

            <span>00</span>

        </span>

    </label>

</div>

<div class="form-element text not-editable">

    <input name="name" class="form-input" id="name" type="text" title="Nom" placeholder=" " pattern="\S+" value="Tressol" disabled>

    <label class="label" for="name">

        <span>Nom</span>

    </label>

</div>