JSFiddle - React, Tailwind, and code Playground
HTML
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="row mb-3">
<div class="col">
Insira seu nome e sobrenome:
<div class="input-group">
<span class="input-group-text">Nome e Sobrenome</span>
<input type="text" class="form-control" placeholder="Insira o seu nome">
<input type="text" class="form-control" placeholder="e sobrenome!">
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
Insira seu nome:
<div class="input-group">
<span class="input-group-text">Nome</span>
<input type="text" class="form-control" placeholder="Insira seu nome!">
</div>
</div>
<div class="col">
Insira seu sobrenome:
<div class="input-group">
<span class="input-group-text">Sobrenome</span>
<input type="text" class="form-control" placeholder="Insira seu sobrenome!">
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
Insira seu usuário:
<div class="input-group">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input type="text" class="form-control" placeholder="Insira seu usuário!">
</div>
</div>
<div class="col">
Insira seu e-mail:
<div class="input-group">
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
<input type="text" class="form-control" placeholder="Insira seu e-mail!">
...
CSS
body {
padding: 20px;
}