DOCUMENTATION

<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 rounded outline-none text-sm border text-gray-600 focus:shadow focus:border-blue-400"
            placeholder="Small" name="Small">
        <label for=" small" class="absolute left-4 -top-3 text-sm bg-white px-1 text-gray-600 peer-focus:px-2 peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-gray-700 peer-focus:bg-white peer-focus:left-2 peer-focus:peer-focus:peer-focus:-top-3">
            Small</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-4 rounded outline-none border text-gray-600 focus:shadow focus:border-blue-400"
            placeholder="Regular" name="Regular">
        <label for=" Regular" class="absolute left-4 -top-3  bg-white px-1 text-gray-600 peer-focus:px-2 peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-gray-700 peer-focus:bg-white peer-focus:left-2 peer-focus:peer-focus:peer-focus:-top-3">
            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 text-lg p-5 rounded outline-none border text-gray-600 focus:shadow focus:border-blue-400"
            placeholder="Large" name="Large">
        <label for=" Large" class="absolute left-4 -top-3 text-lg bg-white px-1 text-gray-600 peer-focus:px-2 peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-gray-700 peer-focus:bg-white peer-focus:left-2 peer-focus:peer-focus:peer-focus:-top-3">
            Large</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-4 outline-none border text-gray-600 focus:shadow border-green-500 rounded is-valid"
            placeholder="Regular" name="regular">
        <label for=" regular" class="absolute left-4 -top-3 bg-white px-1 text-gray-600 peer-focus:px-2 peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-gray-700 peer-focus:bg-white peer-focus:left-2 peer-focus:peer-focus:peer-focus:-top-3">
            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-4 text-gray-600 focus:shadow 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-3 bg-white px-1 text-gray-600 peer-focus:px-2 peer-placeholder-shown: peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-gray-700 peer-focus:bg-white peer-focus:left-2 peer-focus:peer-focus:peer-focus:-top-3">
            Regular</label>
    </div>
</div>