Input
Input Standard
Standard
Validation Message in here
Error Input
Validation Message in here
Success Input
Validation Message in here
- Standard
- Error
- Success
input-standard.html
<div class="flex flex-col gap-1">
<div class="p-3 group focus-within:border-red-400 flex-col border rounded w-full gap-3">
<div class="text-gray-500 text-sm font-medium">Standard</div>
<input class="w-full group-focus:outline group-focus:outline-red-500 text-sm mt-1 outline-none" placeholder="input text here"/>
</div>
<div class="mt-2 text-xs">Validation Message in here</div>
</div>
input-error.html
<div class="flex flex-col gap-1">
<div class="p-3 group bg-red-100 border-red-400 flex-col border rounded w-full gap-3">
<div class="text-gray-500 text-sm font-medium">Error Input</div>
<input class="w-full group-focus:outline bg-red-100 text-sm mt-1 outline-none" placeholder="input text here"/>
</div>
<div class="mt-2 text-xs text-red-500">Validation Message in here</div>
</div>
input-success.html
<div class="flex flex-col gap-1">
<div class="p-3 group bg-green-100 border-green-400 flex-col border rounded w-full gap-3">
<div class="text-gray-500 text-sm font-medium">Success Input</div>
<input class="w-full group-focus:outline bg-green-100 text-sm mt-1 outline-none" placeholder="input text here"/>
</div>
<div class="mt-2 text-xs text-green-500">Validation Message in here</div>
</div>