We will be making it in React and be using the simple conditional rendering in react to achieve this.

First, let us discuss what is actually happenning and how are we going to tackle it ?

So, There are mainly two parts which are responding to the onClick event:

1. The Eye button : It is being changed from the "Eye Closed" to "Eye Open" button

2. The input type : It is being changed from the type="password" to type="text"

So we just need to render these two things conditionally

Let's discuss how to create it step by step

First, Make a directory and name it "react-project"

Then, create React app, using following command and type or paste it in terminal:

When you will get all the files downloaded in your project directory

• In the src folder create a Components directory
• In public folder open index.js and add the Tailwind CSS CDN in the head tag in it.
• Now, you can easily use the tailwind css in your react app

  WARNING:

  Using Tailwind CSS CDN in your react app is

  Not recommended for production, Only for this tutorial or just when you focus on practicing react

  SHOULD NOT BE USED WHILE DEPLOYING YOUR APPLICATION

  For deploying follow tailwind css official documentation for react app integration of tailwind.

  But still if you want to use this method of tailwind integration with react, then you should go for it, try exploring this side, that why is it not recommended ? or what are the drawbacks of using this method while deploying ? or are there actuall consequences or they are just making a fool of yours ? EXPLORE!!

  Good Luck!

• In src directory click on App.js and remove every thing inside it.

Now, you are ready for going on next step

In ./components/ create a file named PasswordInput.js and write the below written code in it:

In ./components/ create a file named Eye.js and write the below written code in it:

In App.js, write the below written code in it:

Then, run the React App, using following command and type or paste it in terminal:

Now open a web browser and go to http://localhost:3000/