JSFiddle - React, Tailwind, and code Playground

by mahdiar_mansouri

HTML

<div class="input-group">
  <span class="fas fa-eye"></span>
  <input type="password" class="input" />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CSS

.input-group{
        position: relative;
        width: 50%;
    }
    .fa-eye{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 1;
    }
    .input{
      position: relative;
      width: 100%;
      height: 100%;
    }