DOCUMENTATION

<div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <input type="text"
            class="block w-full px-4 py-2  placeholder-gray-600 rounded shadow-sm outline-none focus:border-blue-400"
            placeholder="Enter Text">
    </div>
    <div class="relative flex items-stretch w-full mb-3 rounded shadow-sm">
        <span class="flex items-center px-2 py-2  font-semibold text-gray-500 rounded whitespace-nowrap"
            id="basic-addon1">@</span>
        <input type="text" class="block w-full px-2 py-2  placeholder-gray-600 outline-none " placeholder="Addon">
    </div>
    <div class="relative flex items-stretch w-full mb-3 rounded shadow-sm">
        <input type="text" class="block w-full px-2 py-2  placeholder-gray-600 outline-none focus:border-blue-400"
            placeholder="Addon">
        <span class="flex items-center px-2 py-2 font-semibold text-gray-500 whitespace-nowrap"
            id="basic-addon2">@</span>
    </div>
    <div class="relative flex items-stretch w-full mb-3">
        <input type="text"
            class="block w-full px-4 py-2  placeholder-gray-600 border-b rounded shadow-sm outline-none border-green-200 is-valid"
            placeholder="Enter Text">
    </div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <input type="text"
            class="block w-full px-4 py-2  placeholder-gray-600 rounded shadow-sm outline-none is-invalid border-b border-red-200"
            placeholder="Enter Text">
    </div>
    <div class="relative flex items-stretch w-full mb-3">
        <input type="text"
            class="block w-full px-4 py-2  placeholder-gray-600 border border-green-500 rounded shadow outline-none is-valid focus:border-green-400 focus:shadow"
            placeholder="Enter Text">
    </div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <input type="text"
            class="block w-full px-4 py-2  placeholder-gray-600 border border-red-500 rounded shadow outline-none is-invalid focus:border-red-400 focus:shadow "
            placeholder="Enter Text"
            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">
    </div>
</div>