JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="input-group mb-3">
  <span class="input-group-text input-icon">@</span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

<div class="input-group">
  <span class="input-group-text input-icon">@</span>
  <input type="password" class="form-control" placeholder="Username" />
  <span class="input-group-text btn-eye">
    <a href="#">O</a>
  </span>
</div>

SCSS

.input-group-text {
  position: absolute;
  z-index: 10;

  &.input-icon {
    left: 0;
    right: auto;
  }

  &.btn-eye {
    left: auto;
    right: 0;
  }
}

.form-control {
  padding-left: 50px;
  padding-right: 50px;
}