18 Tailwind input components

<input class="border rounded px-3 py-2 w-full" type="text" placeholder="Enter your name">

<input class="rounded-full px-3 py-2 w-full" type="text" placeholder="Enter your name">

<input class="border-b-2 pb-2 w-full" type="text" placeholder="Enter your name">

<input class="border border-gray-400 hover:border-blue-500 focus:border-blue-500 px-3 py-2 w-full" type="text" placeholder="Enter your name">

<div class="flex items-center border-b-2 py-2">
  <span class="px-3"><i class="fas fa-user"></i></span>
  <input class="border-0 flex-1 h-full px-2" type="text" placeholder="Enter your name">
</div>

<div>
  <label class="block text-gray-700 font-bold mb-2" for="username">
    Username
  </label>
  <input class="border rounded px-3 py-2 w-full" type="text" placeholder="Enter your name" id="username">
</div>

<div class="relative">
  <input class="border rounded px-3 py-2 w-full" type="text" placeholder="Enter your name">
  <div class="absolute inset-y-0 right-0 flex items-center pr-3">
    <svg class="fill-current h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
    </svg>
  </div>
</div>

<div class="relative">
  <input class="border rounded px-3 py-2 w-full" type="text" placeholder="Enter your name">
  <div class="absolute inset-y-0 right-0 flex items-center pr-3">
    <button class="focus:outline-none text-gray-600 hover:text-gray-500" type="button">
      <i class="fas fa-times"></i>
    </button>
  </div>
</div>

<div class="relative">
  <input class="border rounded px-3 py-2 w-full" type="password" placeholder="Enter your password">
  <div class="absolute inset-y-0 right-0 flex items-center pr-3">
    <button class="focus:outline-none text-gray-600 hover:text-gray-500" type="button" onclick="togglePassword()">
      <i id="toggleIcon" class="fas fa-eye"></i>
    </button>
  </div>
</div>

<script>
  function togglePassword() {
    var input = document.getElementById("password");
    var icon = document.getElementById("toggleIcon");
    if (input.type === "password") {
      input.type = "text";
      icon.classList.remove("fa-eye");
      icon.classList.add("fa-eye-slash");
    } else {
      input.type = "password";
      icon.classList.remove("fa-eye-slash");
      icon.classList.add("fa-eye");
    }
  }
</script>

<div class="relative">
  <span class="absolute inset-y-0 left-0 flex items-center pl-3">
    <i class="fas fa-search text-gray-500"></i>
  </span>
  <input class="border-2 border-gray-300 bg-white h-10 px-5 pr-10 rounded-lg text-sm focus:outline-none" type="text" placeholder="Search">
  <span class="absolute inset-y-0 right-0 flex items-center pr-3">
    <button class="focus:outline-none text-gray-600 hover:text-gray-500" type="button">
      <i class="fas fa-times"></i>
    </button>
  </span>
</div>

<input class="border rounded px-3 py-2 w-full bg-gray-200 text-gray-500" type="text" placeholder="Enter your name" disabled>

<input class="border rounded px-3 py-2 w-full bg-gray-100" type="text" placeholder="Enter your name" readonly>

<div class="relative rounded-md shadow-sm">
  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
    <span class="text-gray-500 sm:text-sm sm:leading-5">
      $
    </span>
  </div>
  <input class="form-input block w-full pl-7 pr-12 sm:text-sm sm:leading-5 rounded-md" placeholder="0.00">
  <div class="absolute inset-y-0 right-0 flex items-center">
    <label for="currency" class="sr-only">Currency</label>
    <select id="currency" name="currency" class="form-select h-full py-0 pl-2 pr-7 bg-transparent text-gray-500 sm:text-sm sm:leading-5 rounded-md">
      <option>USD</option>
      <option>CAD</option>
      <option>EUR</option>
    </select>
  </div>
</div>

<div class="relative rounded-md shadow-sm">
  <input class="form-input block w-full sm:text-sm sm:leading-5 rounded-md" placeholder="Enter your email">
  <div class="absolute inset-y-0 right-0 flex items-center">
    <span class="inline-flex rounded-md shadow-sm">
      <button type="button" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
        Subscribe
      </button>
    </span>
  </div>
</div>

<div class="flex items-center justify-center bg-grey-lighter">
  <label class="flex flex-col rounded-lg tracking-wide uppercase border border-blue hover:bg-blue hover:text-white cursor-pointer py-5 px-9">
    <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
    </svg>
    <span class="mt-2 text-base leading-normal">Select a file</span>
    <input type="file" class="hidden">
  </label>
</div>

<textarea
  class="block w-full rounded-md border border-gray-400 p-2"
  rows="4"
  placeholder="Enter your text"
></textarea>

<div class="relative">
  <input class="rounded-md border border-gray-400 p-2 w-full" type="text" maxlength="10" placeholder="Enter your text">
  <span class="absolute bottom-0 right-0 text-gray-500 text-xs pr-2 pb-2"><span id="char_left">10</span> / 10</span>
</div>

<script>
  var txt = document.querySelector('input[type="text"]');
  var charactersLeft = document.querySelector('#char_left');
  txt.addEventListener('input', function() {
      var maxLength = this.getAttribute('maxlength');
      var currentLength = this.value.length;
      if (currentLength >= maxLength) {
          charactersLeft.innerHTML = 0;
      } else {
          charactersLeft.innerHTML = maxLength - currentLength;
      }
  });
</script>

<input class="rounded-md border border-gray-400 p-2 w-full" type="date" min="2021-01-01" max="2021-12-31">

<input class="rounded-md border border-gray-400 p-2 w-full" type="time" min="00:00" max="23:59">

<input class="rounded-md border border-gray-400 p-2 w-full" type="color">