Input Types
<form>
<div class="grid gap-6 mb-6 md:grid-cols-2">
<div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Text</label>
<input type="text" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required>
</div>
<div class="mb-6">
<label for="email" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Email address</label>
<input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="info@example.com" required>
</div>
<div class="mb-6">
<label for="password" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Password</label>
<input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="•••••••••" required>
</div>
<div class="mb-6">
<label for="password" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Show/Hide Password</label>
<style>
[type="checkbox"] + label:before{
display: none;
}
</style>
<div class="relative w-full">
<div class="absolute inset-y-0 right-0 flex items-center px-2">
<input class="hidden js-password-toggle" id="toggle" type="checkbox"/>
<label class="bg-gray-300 hover:bg-gray-400 rounded !px-2 py-1 !text-base text-gray-900 cursor-pointer !leading-tight js-password-label" for="toggle"><i class="fa fa-eye-slash text-gray-900" aria-hidden="true"></i></label>
</div>
<input class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 js-password" id="password" type="password" autocomplete="off" />
</div>
</div>
<div class="mb-6">
<label for="message" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Text area</label>
<textarea id="message" rows="4" class="block p-2.5 w-full text-base text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Write your thoughts here..."></textarea>
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Readonly</label>
<input type="text" id="first_name" class="read-only bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" readonly value="Readonly value">
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Disabled</label>
<input type="text" id="disabled-input" aria-label="disabled input" class="mb-6 bg-gray-100 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 cursor-not-allowed dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500" value="Disabled Value" disabled>
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Input Range</label>
<input type="range" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required>
</div>
</div>
<div>
<div class="mb-6">
<label for="select" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Input Select</label>
<select id="select" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option selected>Select any one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="mb-6">
<label for="select_multiple" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Multiple Select</label>
<select multiple id="select_multiple" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="mb-6">
<label class="block mb-2 text-base font-medium text-gray-900 dark:text-white" for="file_input">Input File upload</label>
<input class="block w-full text-base text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="file_input" type="file">
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Input Date</label>
<input type="date" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required>
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Input Month</label>
<input type="month" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required>
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Input Time</label>
<input type="time" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required>
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Input Week</label>
<input type="week" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required>
</div>
<div class="mb-6">
<label for="first_name" class="block mb-2 text-base font-medium text-gray-900 dark:text-white">Input Number</label>
<input type="number" id="first_name" class="bg-gray-50 border border-gray-300 text-gray-900 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="" required>
</div>
</div>
</div>
</form>
Basic File Inputs
SVG, PNG, JPG or GIF (MAX. 800x400px).
Date picker
Checkbox & Radio Button
