JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<form class="card card-body">
  <div class="row">
      <div class="col px-1 mb-2">
          <label for="input1" class="ms-2 position-absolute" style="margin-top: -0.25rem !important">
              <span class="h6 small bg-white text-muted px-1">Username</span>
          </label>
          <input type="text" class="form-control mt-2" id="input1">
      </div>
      <div class="col px-1 mb-2">
          <label for="input2" class="ms-2 position-absolute" style="margin-top: -0.25rem !important">
              <span class="h6 small bg-white text-muted px-1">Password</span>
          </label>
          <input type="password" class="form-control mt-2" id="input2">
      </div>
  </div>
</form>