JSFiddle - React, Tailwind, and code Playground

by SnehalKadwe

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<div id="app">
  <div class="shadow m-5 p-10">
    <div class="flex relative">
      <input v-if="showPassword" type="text" name="password" id="password" class=" border rounded border-indigo-600 p-1 w-full" />
     <input v-else type="password" name="password" id="password" class=" border rounded border-indigo-600 p-1 w-full" />
     <i v-if="!showPassword" @click="show" class="far fa-eye my-2 -ml-7 absolute right-4 text-gray-500 block"></i>
     <i v-else @click="show" class="far fa-eye-slash my-2 -ml-7 absolute right-4"></i>
    </div>
    <button class="bg-indigo-800 shadow text-white my-2 p-2 rounded">
        Submit
    </button>
  </div>
</div>

Vue

new Vue({
  el: "#app",
  data: {
		showPassword: false,
	},
  methods: {
    show()
    {
			this.showPassword = ! this.showPassword;
    }
  }
})