Tailboard | Tailwind Dashboard Template

Input and Select(Required plugins)

Password with show button

Input OTP

Input Tags

Select

Input Select

Date picker

Start and End date

to


<!-- Input Password -->
<div class="mb-6" x-data="{ show: true }">
  <label for="inputpassword" class="inline-block mb-2">Password with show button</label>
  <div class="relative">
    <input placeholder="" :type="show ? 'password' : 'text'" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600"  required>
    
    <div title="Show or hide password" class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="w-6 h-6 text-slate-400" fill="currentColor" @click="show = !show" :class="{'hidden': !show, 'block':show }" viewBox="0 0 16 16">
        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
        <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
        </path>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" @click="show = !show"
        :class="{'block': !show, 'hidden':show }" class="w-6 h-6 text-slate-400 bi bi-eye-slash-fill" viewBox="0 0 16 16">
        <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
        <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
      </svg>
    </div>
  </div>
</div>

<!-- Input OTP -->
<div class="mb-6">
  <label for="otp">Input OTP</label>
  <div id="otp" class="flex space-x-6 mt-2">
    <input type="text" maxlength="1" class="w-10 leading-5 relative py-2 px-3 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputotp1" required>
    <input type="text" maxlength="1" class="w-10 leading-5 relative py-2 px-3 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputotp2" required>
    <input type="text" maxlength="1" class="w-10 leading-5 relative py-2 px-3 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputotp3" required>
    <input type="text" maxlength="1" class="w-10 leading-5 relative py-2 px-3 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="exampleInputotp4" required>
  </div>
  <!-- OTP Input -->
  <script>
  function OTPInput() {
    const inputs = document.querySelectorAll('#otp > *[id]');
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener('keydown', function(event) {
        if (event.key === "Backspace") {
          inputs[i].value = '';
          if (i !== 0)
            inputs[i - 1].focus();
        } else {
          if (i === inputs.length - 1 && inputs[i].value !== '') {
            return true;
          } else if (event.keyCode > 47 && event.keyCode < 58) {
            inputs[i].value = event.key;
            if (i !== inputs.length - 1)
              inputs[i + 1].focus();
            event.preventDefault();
          } else if (event.keyCode > 64 && event.keyCode < 91) {
            inputs[i].value = String.fromCharCode(event.keyCode);
            if (i !== inputs.length - 1)
              inputs[i + 1].focus();
            event.preventDefault();
          }
        }
      });
    }
  }
  OTPInput();
  </script>
</div>

<!-- Input Tags -->
<div class="mb-6" x-data="{ show: true }">
  <label for="inputtag" class="inline-block mb-2">Input Tags</label>
  <div class="relative">
    <input id="inputtag" class="tagify w-full leading-5 relative text-sm py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" name='basic' value='Html, CSS, Javascript'>
  </div>
</div>

<!-- Select -->
<div class="mb-6" x-data="{ show: true }">
  <label for="inputselect" class="inline-block mb-2">Select</label>
  <div class="relative">
    <input id="inputselect" name='tags' class='selectMode w-full leading-5 relative text-sm py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600' placeholder="Please select" />
  </div>
</div>

<!-- Input Select -->
<div class="mb-6">
  <label for="tagsselect" class="inline-block mb-2">Input Select</label>
  <input name="selectname" value="" class="tagify-select w-full leading-5 relative text-sm py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="tagsselect" minlength="2">
</div>

<!-- Date picker -->
<div class="mb-6">
  <label for="datepick" class="inline-block mb-2">Date picker</label>
  <div id="datepicks" class="flex flex-col justify-center md:flex-row md:justify-between">
    <input id="datepick" class="datepick w-full leading-5 relative text-sm py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" type="text" name="start">
  </div>
</div>

<!-- Range time -->
<div class="mb-6">
  <label for="rangetime" class="inline-block mb-2">Start and End date</label>
  <div id="rangetime" class="flex flex-row justify-between">
    <input id="startDate" class="startDate w-full leading-5 relative text-sm py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" type="text" name="start">
    <span class="px-4 text-center">to</span>
    <input id="endDate" class="endDate w-full leading-5 relative text-sm py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" type="text" name="end">
  </div>
</div>

Text Editor(Required plugins)

Example textarea with editor


<!-- Text editor -->
<div class="mb-6">
  <label for="texteditor" class="inline-block mb-2">Example textarea with editor</label>
  <textarea class="texteditor w-full leading-5 relative py-3 px-5 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="texteditor" rows="3"></textarea>
</div>

Upload images(Required plugins)

Multiple upload

Drag & drop images here

+

Single upload

Drag & drop images here


<!-- Multiple upload -->
<p class="text-lg font-bold mb-6">Multiple upload</p>
<div class="mb-6">
  <div id="imageUpload" class="dropzone multiple-dropzone mb-6">
    <div class="dz-message" data-dz-message>
      <div class="pre-upload flex flex-col justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="mx-auto text-slate-500 inline-block w-10 h-10 bi bi-cloud-arrow-up" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"></path>
          <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"></path>
        </svg>
        <div class="py-3"><span>Drag & drop images here</span></div>
      </div>
      <div class="pre-upload text-center">
        <button class="py-1.5 px-3 inline-block text-center rounded leading-normal text-slate-800 bg-slate-100 border border-slate-100 hover:text-slate-900 hover:bg-slate-200 hover:ring-0 hover:border-slate-200 focus:bg-slate-200 focus:border-slate-200 focus:outline-none focus:ring-0 mr-2 dark:bg-slate-300">Browse file</button>
      </div>
      <span class="after-upload">+</span>
    </div>
  </div>
</div>

<!-- Single upload -->
<p class="text-lg font-bold mb-6">Single upload</p>
<div class="mb-6">
  <div id="imageSingle" class="dropzone single-dropzone mb-6">
    <div class="dz-message" data-dz-message>
      <div class="pre-upload flex flex-col justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="mx-auto text-slate-500 inline-block w-10 h-10 bi bi-cloud-arrow-up" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"></path>
          <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"></path>
        </svg>
        <div class="py-3"><span>Drag & drop images here</span></div>
      </div>
      <div class="pre-upload text-center">
        <button class="py-1.5 px-3 inline-block text-center rounded leading-normal text-slate-800 bg-slate-100 border border-slate-100 hover:text-slate-900 hover:bg-slate-200 hover:ring-0 hover:border-slate-200 focus:bg-slate-200 focus:border-slate-200 focus:outline-none focus:ring-0 mr-2 dark:bg-slate-300">Browse file</button>
      </div>
    </div>
  </div>
</div>

Form Validation (Required plugins)

Email

Password

Address

Address 2

City

State

Zip

I agree to the Terms of Use


<form class="valid-form flex flex-wrap flex-row -mx-4">
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/2 mb-4">
    <label for="inputEmail4" class="inline-block mb-2">Email</label>
    <input type="email" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputEmail4" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/2 mb-4">
    <label for="inputPassword4" class="inline-block mb-2">Password</label>
    <input type="password" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputPassword4" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full mb-4">
    <label for="inputAddress" class="inline-block mb-2">Address</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputAddress" placeholder="1234 Main St" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full mb-4">
    <label for="inputAddress2" class="inline-block mb-2">Address 2</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputAddress2" placeholder="Apartment, studio, or floor" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/2 mb-4">
    <label for="inputCity" class="inline-block mb-2">City</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputCity" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/3 mb-4">
    <label for="inputState" class="inline-block mb-2">State</label>
    <select id="inputState" class="inline-block w-full leading-5 relative py-2 pl-3 pr-8 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 select-caret appearance-none dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" required>
      <option>Choose...</option>
      <option>Yokohama</option>
      <option>Nevada</option>
      <option>Barcelona</option>
    </select>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full md:w-1/6 mb-4">
    <label for="inputZip" class="inline-block mb-2">Zip</label>
    <input type="text" class="w-full leading-5 relative py-2 px-4 rounded text-slate-800 bg-white border border-slate-300 overflow-x-auto focus:outline-none focus:border-slate-400 focus:ring-0 dark:text-slate-300 dark:bg-slate-700 dark:border-slate-700 dark:focus:border-slate-600" id="inputZip" required>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full mb-4">
    <label class="flex items-center">
      <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 text-cyan-500 dark:bg-slate-700 border border-slate-300 dark:border-slate-700 rounded focus:outline-none mr-3" required>
      <span>I agree to the Terms of Use</span>
    </label>
  </div>
  <div class="form-group flex-shrink max-w-full px-4 w-full">
    <button type="submit" class="py-2 px-4 inline-block text-center rounded leading-5 text-slate-100 bg-cyan-500 border border-cyan-500 hover:text-white hover:bg-cyan-600 hover:ring-0 hover:border-cyan-600 focus:bg-cyan-600 focus:border-cyan-600 focus:outline-none focus:ring-0">Register now</button>
  </div>
</form>