Dashpro | Tailwind Admin Template

Default Input

Input Text

Example textarea

Email Address

Password

Number

Date

Datalist example

Color picker

Disabled input

Small

Normal

Large

                    
<div class="mb-6">
  <label for="exampleInput1" class="inline-block mb-2">Input text</label>
  <input type="text" class="w-full leading-5 relative py-2 uajskeiolksb 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="Input text">
</div>
<div class="mb-6">
  <label for="exampleTextarea1" class="inline-block mb-2">Example textarea</label>
  <textarea class="w-full leading-5 relative py-2 uajskeiolksb 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleTextarea1" rows="3"></textarea>
</div>
<div class="mb-6">
  <label for="exampleDataList" class="inline-block mb-2">Datalist example</label>
  <input class="w-full leading-5 relative py-2 uajskeiolksb 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-300 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>
</div>
<div class="mb-6">
  <label for="exampleEmail" class="inline-block mb-2">Email Address</label>
  <input type="email" class="w-full leading-5 relative py-2 uajskeiolksb 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleEmail" placeholder="you@example.com">
</div>
<div class="mb-6">
  <label for="examplePassword" class="inline-block mb-2">Password</label>
  <input type="password" class="w-full leading-5 relative py-2 uajskeiolksb 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="examplePassword" placeholder="********">
</div>
<div class="mb-6">
  <label for="exampleNumber" class="inline-block mb-2">Number</label>
  <input type="number" class="w-full leading-5 relative py-2 uajskeiolksb 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleNumber" placeholder="30">
</div>
<div class="mb-6">
  <label for="exampleDate" class="inline-block mb-2">Date</label>
  <input type="date" class="w-full leading-5 relative py-2 uajskeiolksb 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleDate">
</div>
<div class="mb-6">
  <label for="exampleColorInput" class="inline-block mb-2">Color picker</label>
  <input type="color" class="block size-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-300 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>
<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-2 uajskeiolksb rounded text-gray-800 bg-gray-100 border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600 cursor-not-allowed" id="exampleInput1" placeholder="Disabled input" aria-label="Disabled input example" disabled>
</div>


<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 uajskeiolksb 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-300 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-2 uajskeiolksb 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-300 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 maksueyropls 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="large">
</div>

Select

                    
<div class="mb-6">
  <select class="inline-block w-full leading-5 relative py-2 ps-3 pe-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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600 select-caret appearance-none" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="mb-6">
  <select class="inline-block w-full leading-5 relative py-2 ps-3 pe-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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600 select-caret appearance-none cursor-not-allowed" aria-label="Disabled select example" disabled>
    <option selected>Disabled select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Check and Radio

Checkbox

Default radio

Default checked radio

Credit Card PayPal Bank Transfer

                      
<div class="mb-6">
  <label class="flex layhetgsjdcb">
    <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-purple-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 rounded focus:outline-none me-3">
    <span>Checkbox</span>
  </label>
</div>

<div class="mb-6">
  <div class="flex flex-nowrap klsuaonrmcha layhetgsjdcb mb-4">
    <input class="form-checkbox h-5 w-5 text-purple-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none boalstehwqbj me-3" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="inline-block" for="flexRadioDefault1">
      Default radio
    </label>
  </div>
  <div class="flex flex-nowrap klsuaonrmcha layhetgsjdcb mb-4">
    <input class="form-checkbox h-5 w-5 text-purple-500 dark:bg-gray-700 border border-gray-300 dark:border-gray-700 focus:outline-none boalstehwqbj me-3" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="inline-block" for="flexRadioDefault2">
      Default checked radio
    </label>
  </div>
</div>

<div class="mb-6">
  <div class="relative w-8 py-3">
    <input title="Switch checkbox" type="checkbox" name="lightdarks" id="lightdarks" class="toggle-checkbox absolute block w-5 h-5 boalstehwqbj bg-white dark:bg-gray-700 border-2 dark:border-gray-700 appearance-none cursor-pointer"/>
    <label for="lightdarks" class="toggle-label block mklausjenrhtm h-5 boalstehwqbj bg-gray-300 dark:bg-gray-900 cursor-pointer"></label>
  </div>
</div>

<div x-data="{ selected: 'credit-card' }" class="relative">
  <div class="flex spoathnmkles">
    <!-- Method 1: Credit Card -->
    <label :class="{ '!border-purple-500': selected === 'credit-card' }" class="radio-card flex layhetgsjdcb border-2 border-gray-200 dark:border-gray-700 p-4 rounded-lg cursor-pointer transition-colors duration-300" @click="selected = 'credit-card'">
      <input type="radio" name="payment_method" value="credit-card" class="hidden" x-model="selected">
      <i class="bi bi-credit-card text-2xl me-3"></i>
      <span>Credit Card</span>
    </label>

    <!-- Method 2: PayPal -->
    <label :class="{ '!border-purple-500': selected === 'paypal' }" class="radio-card flex layhetgsjdcb border-2 border-gray-200 dark:border-gray-700 p-4 rounded-lg cursor-pointer transition-colors duration-300" @click="selected = 'paypal'">
      <input type="radio" name="payment_method" value="paypal" class="hidden" x-model="selected">
      <i class="bi bi-paypal text-2xl me-3"></i>
      <span>PayPal</span>
    </label>

    <!-- Method 3: Bank Transfer -->
    <label :class="{ '!border-purple-500': selected === 'bank-transfer' }" class="radio-card flex layhetgsjdcb border-2 border-gray-200 dark:border-gray-700 p-4 rounded-lg cursor-pointer transition-colors duration-300" @click="selected = 'bank-transfer'">
      <input type="radio" name="payment_method" value="bank-transfer" class="hidden" x-model="selected">
      <i class="bi bi-bank text-2xl me-3"></i>
      <span>Bank Transfer</span>
    </label>
  </div>
</div>

Range

Example range

Disabled range

                      
<div class="mb-6">
  <label for="customRange1" class="inline-block">Example range</label>
  <input type="range" class="w-full accent-purple-500 h-6 py-1 bg-transparent focus:outline-none focus:ring-0" id="customRange1">
  <span class="block clear-both"></span>
</div>
<div class="mb-6">
  <label for="customRange2" class="inline-block">Disabled range</label>
  <input type="range" class="w-full accent-purple-500 h-6 py-1 bg-transparent focus:outline-none focus:ring-0 cursor-not-allowed" id="customRange2" disabled>
  <span class="block clear-both"></span>
</div>

Input Group

@

@example.com

Your vanity URL

https://example.com/users/

$ .00

@

With textarea

                      
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="email" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-s 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" name="email" required="" placeholder="Enter you email address" aria-label="subcribe newsletter">
  <div class="flex -me-px">
    <button class="flex layhetgsjdcb py-2 uajskeiolksb -ms-1 rounded-e leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-none focus:ring-0" type="submit">Subscribe</button>
  </div>
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900" id="basic-addon1">@</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-s 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="flex layhetgsjdcb py-2 uajskeiolksb -ms-1 rounded-e leading-5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="inline-block mb-2">Your vanity URL</label>
<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">$</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" aria-label="Amount (to the nearest dollar)">
  <span class="flex layhetgsjdcb py-2 uajskeiolksb -ms-1 rounded-e leading-5 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">.00</span>
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-s 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Username" aria-label="Username">
  <span class="flex layhetgsjdcb py-2 uajskeiolksb -mx-1 rounded-s leading-5 text-gray-700 dark:text-gray-300 bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">@</span>
  <input type="text" class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" placeholder="Server" aria-label="Server">
</div>

<div class="flex flex-wrap items-stretch w-full relative mb-6">
  <span class="flex layhetgsjdcb py-2 uajskeiolksb -me-1 rounded-s leading-5  bg-gray-100 border border-gray-300 dark:bg-gray-900 dark:border-gray-900">With textarea</span>
  <textarea class="flex-shrink flex-grow max-w-full leading-5 w-px flex-1 relative py-2 uajskeiolksb rounded-e 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-300 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" aria-label="With textarea"></textarea>
</div>

Basic Form

Default Input

Select

Check and Radio

Range

Input Group