JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <title>jQuery contacts app</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <header>
    <div class="container text-center mt-4 mb-4">
      <h1>jQuery contacts app</h1>
    </div>
  </header>
  <main>
    <div class="container">
      <form id="form-new-contact" action="" method="POST" class="table-row mt-4 mb-4">
        <div class="text-center"><span class="fas fa-user-plus fa-sm mb-2"></span></div>
        <div class="">
          <label for="first-name">First name:</label>
          <input name="first-name" id="first-name" class="form-control form-control-sm" type="text" value="Voornaam" placeholder="John" required>
        </div>
        <div class="">
          <label for="last-name">Last name:</label>
          <input name="last-name" id="last-name" class="form-control form-control-sm" type="text" value="Achternaam" placeholder="Doe" required>
        </div>
        <div class="">
          <label for="email">Email:</label>
          <input name="email" id="email" class="form-control form-control-sm" type="email" value="E-mailadres" placeholder="[email protected]" required>
        </div>
        <div class="">
          <label for="phone">Phone:</label>
          <input name="phone" id="phone" class="form-control form-control-sm" type="tel" value="Telefoon/GSM" placeholder="555-666-8989" required>
        </div>
        <div class="">
          <label for="address">Address:</label>
          <input name="address" id="address" class="form-control form-control-sm" type="text" value="Adres" placeholder="Somewhere"...

CSS

html {}

.active {}

.inactive {
  color: #b8b8b8;
}

.table td,
.table th {
  padding: 0.5rem;
}

.text-large {
  font-size: 1.5rem;
}

.relative {
  position: relative;
}


/*** Search ***/

#search-input {
  font-size: 2rem;
  font-weight: 300;
}

span#search-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 47px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 1.6rem;
  line-height: 34px;
}


/*** Contacts table ***/

.table-header {
  padding: 15px 0 5px;
}

.table-row {
  display: grid;
  grid-template-columns: 30px repeat(5, 1fr) 100px;
  grid-column-gap: 20px;
  margin: 3px 0;
  padding: 2px 0;
  background: #f0f0f0;
}

.table-cell {
  padding: 3px;
}

.editable-cell {
  background: rgba(255, 255, 255, 0.6);
}

.contact-actions span {
  line-height: 18px;
  padding: 3px;
  display: inline-block;
  width: 26px;
  text-align: center;
}


/*** Form ***/

#form-new-contact {
  align-items: end;
  margin: 0 -15px;
  padding: 15px;
}

#add-contact {
  width: 100%;
}