JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<div class="mb-3 form-floating input-group">
  <span class="input-group-text">My name is</span>
  <input class="form-control" placeholder="Name" type="text" value="" name="person[name]" id="person_name">
  <label class="form-label" for="person_name">Name</label>
</div>

<div class="mb-3 input-group">
  <span class="input-group-text">My name is</span>
  <div class="form-floating">
    <input class="form-control" placeholder="Name" type="text" value="" name="person[name]" id="person_name">
    <label class="form-label" for="person_name">Name</label>
  </div>
</div>