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>