Input Password with Show Hide - Tailwind Component

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

<div class="container items-center px-4 py-8 m-auto mt-5 space-y-5 bg-gray-200 dark:bg-gray-800">
  <div class="w-full md:w-2/3 shadow px-5 py-4 bg-white mx-auto">
    <div class="relative" x-data="{ isVisible: false }">
      <div class="absolute flex right-4 mt-1.5 items-center ml-2 h-full">
        <button class="px-1 block focus:outline-none" @click="$dispatch('visibility'); isVisible = !isVisible;">
          <div x-show="isVisible">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
              </path>
            </svg>
          </div>
          <div x-show="!isVisible">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21">
              </path>
            </svg>
          </div>
        </button>
      </div>
      <label for="password1" class="block">
        <span
          class="block font-medium m-2 text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500">Password</span>
        <input type="password" id="password1" placeholder="password" minlength="5"
          class="px-8 py-3 w-full bg-gray-100 border-transparent focus:border-transparent border border-gray-400 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 focus:bg-blue-100 first-letter:invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 invalid:focus:bg-pink-100 peer"
          @visibility.window="$el.type = ($el.type == 'password') ? 'text' : 'password' ">
        <p class="text-xs m-1 text-pink-700 invisible peer-invalid:visible">less than 5 characters</p>
      </label>
    </div>
  </div>
  <div class="w-full md:w-2/3 shadow px-5 py-2 rounded-md bg-white mx-auto">
    <div class="relative" x-data="{ isVisible: false }">
      <div class="absolute flex right-4 items-center h-full">
        <button class="rounded-md px-1 block focus:outline-none"
          @click="$dispatch('visibility'); isVisible = !isVisible;">
          <div x-show="isVisible">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
              </path>
            </svg>
          </div>
          <div x-show="!isVisible">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21">
              </path>
            </svg>
          </div>
        </button>
      </div>
      <label for="password2" class="flex flex-row items-center py-8">
        <span class="font-medium m-2 text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500">Password</span>
        <input type="password" id="password2" placeholder="password" minlength="5"
          class="px-8 py-3 rounded-md w-full bg-gray-100 text-sm first-letter:invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 border-transparent focus:border-transparent focus:ring-0 peer"
          @visibility.window="$el.type = ($el.type == 'password') ? 'text' : 'password' ">
        <p class="absolute bottom-0 left-28 text-xs m-1 text-pink-700 invisible peer-invalid:visible">less than 5
          characters</p>
      </label>
    </div>
  </div>
  <div class="w-full md:w-2/3 shadow px-5 py-4 bg-white mx-auto">
    <div class="relative" x-data="{ isVisible: false }">
      <div class="absolute flex right-4 mt-1.5 items-center ml-2 h-full">
        <button class="px-1 block focus:outline-none" @click="$dispatch('visibility'); isVisible = !isVisible;">
          <div x-show="isVisible">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
              </path>
            </svg>
          </div>
          <div x-show="!isVisible">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21">
              </path>
            </svg>
          </div>
        </button>
      </div>
      <label for="password3" class="block">
        <span
          class="block font-medium m-2 text-gray-700 after:content-['*'] after:ml-0.5 after:text-red-500">Password</span>
        <input type="password" id="password3" placeholder="password" minlength="5"
          class="px-8 rounded-full py-3 w-full bg-gray-100 border-transparent border-blue-400 focus:border-transparent border text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 focus:bg-blue-100 first-letter:invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 invalid:focus:bg-pink-100 peer"
          @visibility.window="$el.type = ($el.type == 'password') ? 'text' : 'password' ">
        <p class="text-xs m-1 text-pink-700 invisible peer-invalid:visible">less than 5 characters</p>
      </label>
    </div>
  </div>
</div>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

  body {
    font-family: 'Poppins', sans-serif;
  }
</style>