<!-- Container for demo purpose -->

<div class="container my-5 py-5">

​

  <!-- Section: Design Block -->

  <section class="mb-10">

    <div class="shadow-4 rounded-5 overflow-hidden">

      <table class="table align-middle mb-0 bg-white">

        <thead class="bg-light">

          <tr>

            <th>Name</th>

            <th>Title</th>

            <th>Status</th>

            <th>Position</th>

            <th>Actions</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">John Doe</p>

                  <p class="text-muted mb-0">john.doe@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">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">Alex Ray</p>

                  <p class="text-muted mb-0">alex.ray@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"

                    >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">Kate Hunington</p>

                  <p class="text-muted mb-0">kate.hunington@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">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>

    </div>

  </section>

  <!-- Section: Design Block -->

​

</div>  

<!-- Container for demo purpose -->

body {

  background-color: hsl(0, 0%, 96%);

}

​