Show/hide password with Tailwind and Vanilla JavaScript

I will show you a simple way in Vanilla #JavaScript how to made show/hide password button. Let’s start with #Tailwind first:

<script src="https://cdn.tailwindcss.com?plugins=forms"></script>

Then add following HTML code:

<div class="mx-auto max-w-md my-12">
  <label for="password" class="font-bold mb-2">Password</label>
  <div class="flex justify-center w-full">
    <input
      id="password"
      type="password"
      name="password"
      autocompletetype="password"
      x-autocompletetype="password"
      class="block w-full border-gray-200 rounded-l border-t border-l border-b p-2 shadow-sm"
      placeholder="Your password"
      required
    />
    <label
      class="cursor-pointer border shadow-sm px-3 border-y border-r m-0 pt-2 rounded-r-md hover:bg-gray-100"
    >
      <input
        type="checkbox"
        class="sr-only peer"
        onclick="(function(el) { el.parentNode.previousElementSibling.type = el.checked ? 'text' : 'password';})(this)"
      />
      <span class="block peer-checked:hidden">show</span>
      <span class="hidden peer-checked:block">hidde</span>
    </label>
  </div>
</div>