Code

<div x-data="{
      showPassword : false
    }">
      <label for="password" class="block text-sm font-medium text-gray-600">Password</label>
      <div  class="mt-1 relative rounded-md shadow-sm">
        <input :type="showPassword ? 'text' : 'password'" name="password" id="password" class="border p-2 focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-10 sm:text-sm border-gray-300 rounded-md" placeholder="Enter password">
        <div x-on:click="showPassword = !showPassword" class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
          <i class="fa" :class="showPassword ? 'fa-eye' : 'fa-eye-slash'"></i>            
        </div>
      </div>
    </div>

Documentation

This example uses AlpineJS to show and hide password field using TailwindCSS as the front end. On clicking of the show/hide icon we change the toggle the showPassword property. Which is binded to the type attribute of the input to switch between type text and password.