<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<table class="table align-middle mb-0 bg-white">
<thead class="bg-light">
<tr>
<th>Nome</th>
<th>Ruolo</th>
<th>Status</th>
<th>Posizione</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://mdbootstrap.com/img/new/avatars/8.jpg" alt="" style="width: 45px; height: 45px" class="rounded-circle" />
<div class="ms-3">
<p class="fw-bold mb-1">Alessandro Birillo</p>
<p class="text-muted mb-0">albirillo@gmail.com</p>
</div>
</div>
</td>
<td>
<p class="fw-normal mb-1">Software engineer</p>
<p class="text-muted mb-0">IT department</p>
</td>
<td>
<span class="badge badge-success rounded-pill d-inline">Active</span>
</td>
<td>Senior</td>
<td>
<button type="button" class="btn btn-link btn-sm btn-rounded">
Edit
</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://mdbootstrap.com/img/new/avatars/6.jpg" class="rounded-circle" alt="" style="width: 45px; height: 45px" />
<div class="ms-3">
<p class="fw-bold mb-1">Melissa Rossi</p>
<p class="text-muted mb-0">melissarossi@gmail.com</p>
</div>
</div>
</td>
<td>
<p class="fw-normal mb-1">Consultant</p>
<p class="text-muted mb-0">Finance</p>
</td>
<td>
<span class="badge badge-primary rounded-pill d-inline">Onboarding</span>
</td>
<td>Junior</td>
<td>
<button type="button" class="btn btn-link btn-rounded btn-sm fw-bold" data-mdb-ripple-color="dark">
Edit
</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="https://mdbootstrap.com/img/new/avatars/7.jpg" class="rounded-circle" alt="" style="width: 45px; height: 45px" />
<div class="ms-3">
<p class="fw-bold mb-1">Chiara Rampoldi</p>
<p class="text-muted mb-0">kiaram@gmail.com</p>
</div>
</div>
</td>
<td>
<p class="fw-normal mb-1">Designer</p>
<p class="text-muted mb-0">UI/UX</p>
</td>
<td>
<span class="badge badge-warning rounded-pill d-inline">Awaiting</span>
</td>
<td>Senior</td>
<td>
<button type="button" class="btn btn-link btn-rounded btn-sm fw-bold" data-mdb-ripple-color="dark">
Edit
</button>
</td>
</tr>
</tbody>
</table>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.