Personal Information Form - Copy this Html, Tailwind Component to your project

Build this form ui <! Step 1: Informations personnelles > <div id="step 1" class="step transition all transform translate x 0 duration 500 ease in out w full opacity 100"> <! Step 1 > <div id="step1" class="stepper step"> <div class="flex items center justify center w 16 h 16 mx auto bg white dark:bg gray 800 border 2 border gray 200 dark:border gray 700 rounded full shadow step circle" data step="1"> <span class="text xl font semibold text gray 700 dark:text gray 200">1</span> </div> <h3 class="mt 4 sm:mt 6 text xl text center font semibold leading tight text gray 900 dark:text white md:mt 10"> Informations Personnelles du Vendeur </h3> <p class="mt 3 sm:mt 4 text base text center text gray 600 dark:text gray 400"> Dans cette première étape, nous collectons les informations de base nécessaires pour établir votre profil en tant que vendeur. Veuillez vérifier que vos données sont correctes, notamment votre prénom, nom, et sexe, afin d'assurer une identification claire et rapide dans notre système. </p> </div> <! First Name > <div class="tptrack__id mb 10"> <div class="relative"> <input id="firstname" class="mt 1" type="text" name="first_name" value="{{ $firstName }}" readonly placeholder="Votre prénom" required /> </div> <x input error :messages="$errors >get('first_name')" class="mt 2" /> </div> <! Last Name > <div class="tptrack__id mb 10"> <div class="relative"> <input id="lastname" class="mt 1" type="text" name="last_name" value="{{ $lastName }}" readonly placeholder="Votre nom" required /> </div> <x input error :messages="$errors >get('last_name')" class="mt 2" /> </div> <! Sexe > <div class="tptrack__id mb 10"> <div class="relative"> <select id="sexe" name="sexe" class=" select custom nice select text gray 900 border border gray 300 rounded lg px 24"> <option value="{{ $sexe }}" selected> {{ $sexe }} </option> </select> </div> <x input error :messages="$errors >get('sexe')" class="mt 2" /> </div> </div>