Input
Give <input> and <textarea> an upgrade with custom styles, sizing, focus states, and more.
Example
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Email address</label>
<input type="email" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="name@example.com">
</div>
<div class="mb-6">
<label for="exampleTextarea1" class="inline-block mb-2">Example textarea</label>
<textarea class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleTextarea1" rows="3"></textarea>
</div>
Disabled
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Disabled input</label>
<input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-gray-100 border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 cursor-not-allowed dark:text-gray-400 dark:bg-gray-600 dark:border-gray-600 dark:focus:border-gray-600" id="exampleInput1" placeholder="Disabled input" aria-label="Disabled input example" disabled>
</div>
Sizing
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Small</label>
<input type="text" class="w-full leading-5 relative text-sm py-2 pyaieolaksj rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="small">
</div>
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Normal</label>
<input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="normal">
</div>
<div class="mb-6">
<label for="exampleInput1" class="inline-block mb-2">Large</label>
<input type="text" class="w-full leading-5 relative text-2xl py-4 px-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="large">
</div>
Datalist
<label for="exampleDataList" class="inline-block mb-2">Datalist example</label>
<input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="Burger">
<option value="Pizza">
<option value="Fried Rice">
<option value="Fried Chicken">
<option value="Kebab">
</datalist>
Readonly
<div class="flex flex-wrap lsdfdfsdafd pdskdmsdnjw -mx-4 mb-6">
<label for="staticEmail" class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/6">Email</label>
<div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-5/6">
<input type="text" readonly class="fw-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border-0 border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="flex flex-wrap lsdfdfsdafd pdskdmsdnjw -mx-4 mb-6">
<label for="inputPassword" class="flex-shrink max-w-full pyaieolaksj w-full sm:w-1/6">Password</label>
<div class="flex-shrink max-w-full pyaieolaksj w-full sm:w-5/6">
<input type="password" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputPassword">
</div>
</div>
File input
<div class="mb-6">
<label for="formFile" class="inline-block mb-2">Default file input example</label>
<input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="file" id="formFile">
</div>
<div class="mb-6">
<label for="formFileMultiple" class="inline-block mb-2">Multiple files input example</label>
<input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-6">
<label for="formFileDisabled" class="inline-block mb-2">Disabled file input example</label>
<input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="file" id="formFileDisabled" disabled>
</div>
Color
<div class="mb-6">
<label for="exampleColorInput" class="inline-block mb-2">Color picker</label>
<input type="color" class="block w-10 h-10 leading-5 relative rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" style="max-width: 3rem" id="exampleColorInput" value="#1e40af" title="Choose your color">
</div>