DOCUMENTATION

<div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <input type="email" autocomplete="off" class="peer placeholder-transparent block w-full p-3 pt-6 rounded outline-none border text-gray-600 focus:shadow focus:border-blue-400" placeholder="Email address" name="email">
        <label for=" email" class="absolute left-4 top-1 text-gray-500 transition-all peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:peer-focus:text-gray-500 peer-focus:text-sm ">
            Email address</label>
    </div>
    <div class="relative flex items-stretch w-full mb-3">
        <input type="password" autocomplete="off" class="peer placeholder-transparent block w-full p-3 pt-6 rounded outline-none border text-gray-600 focus:shadow focus:border-blue-400" placeholder="Password" name="password">
        <label for="password" class="absolute left-4 top-1 text-gray-500 transition-all peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:peer-focus:text-gray-500 peer-focus:text-sm ">
            Password</label>
    </div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <input type="text" class="block w-full p-4 bg-gray-200  rounded placeholder-gray-500 font-semibold" placeholder="Regular" disabled="disabled">
    </div>
    <div class="relative flex items-stretch w-full mb-3">
        <input type="text" autocomplete="off" class="peer placeholder-transparent block w-full p-3 pt-6 outline-none border text-gray-600 focus:shadow focus:border-blue-400 border-green-500 rounded is-valid" placeholder="Regular" name="regular">
        <label for=" regular" class="absolute left-4 top-1 text-gray-500 transition-all peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:peer-focus:text-gray-500 peer-focus:text-sm ">
            Regular</label>
    </div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <input type="text" autocomplete="off" class="peer placeholder-transparent block w-full p-3 pt-6 text-gray-600 focus:shadow focus:border-blue-400 border border-red-500 rounded outline-none is-invalid" placeholder="Regular" 
        style="background-image:data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c03221' %3e%3ccircle cx='6'cy='6' r='4.5' /%3e%3cpath stroke-linejoin='round' 
        d='M5.8 3.6h.4L6 6.5z' /%3e%3ccircle cx='6'cy='8.2' r='.6' fill='%23c03221' stroke='none' /%3e%3c/svg%3e">
        <label for="regular" class="absolute left-4 top-1 text-gray-500 transition-all peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:peer-focus:text-gray-500 peer-focus:text-sm ">
            Regular</label>
    </div>
</div>