Simple show and 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>