JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">
<div id="main" class="container">

  <form method="post" action="/login/">
    <div class="d-flex justify-content-center">
      <div class="form-floating input-group">
        <input id="id-bad" class="text-uppercase form-control" name="bad" type="text" placeholder="Type into me" min-length="6" max-length="6">
        <label for="id-bad" class="form-label">Disappears while typing</label>
        <button class="btn btn-primary rounded-end px-3" type="submit">Login</button>
      </div>
    </div>

    <div class="d-flex justify-content-center">
      <div class="form-floating">
        <input id="id-good" class="text-uppercase form-control" name="good" type="text" placeholder="Type into me" min-length="6" max-length="6">
        <label for="id-good" class="form-label">I stay visible</label>
        <button class="btn btn-primary rounded-end px-3" type="submit">Login</button>
      </div>
    </div>

  </form>
</div>