JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<table class="table" id="example">
  <thead class="thead">
    <tr class="tr">
      <th class="sort">
          <span class="span">Age <i class="fas fa-sort-up"></i></span>
      </th>
      <th class="sort">
       <span class="span">Favorite Food<i class="fas fa-sort-up"></i></span>
      </th>
      <th class="sort" aria-sort="ascending" >
          <span class="span">Favorite Color<i class="fas fa-sort-up"></i></span>
      </th>
      <th class="sort">
          <span class="span">Likes Neil Diamond?<i class="fas fa-sort-up"></i></span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>18</td>
      <td>pizza</td>
      <td>blue</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>35</td>
      <td>ribeye with roasted potato, pepper rice and some peter grum wine</td>
      <td>green</td>
      <td>yes</td>
    </tr>
  </tbody>
</table>

CSS

.table {
  border-collapse: collapse;
  width: 100%;
}
thead .th3 {
   width: 190px !important;
}
thead .th2{
    width: 150px !important;
}
.thead {
  border-bottom: 3px solid #d0d3d3;
}

.thead .tr {
  vertical-align: bottom;
}

.button {
  padding: 1rem;
  text-align: start;
  font-family: Arial, "noto sans", sans-serif;
  font-size: 0.875rem;
  border: 0;
  background-color: transparent;
  width: 100%;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  line-height: 1.4;
}

.fas .fa-sort-up{
  color: black;
  background-color: black;
}
th{
  padding: 10px;
}

thead .sort {
   min-width: 170px;
   max-width: 170px;
}

tr td{
  word-break: break-all;
  text-align: center;
}

JavaScript

$('#example thead>tr').on('click','th',(e)=>{
let target = e.target;
if($(target).children('i').hasClass('fa-sort-up')){
$(target).children('i').removeClass('fa-sort-up');
$(target).children('i').addClass('fa-sort-down');
}else{
$(target).children('i').removeClass('fa-sort-down');
$(target).children('i').addClass('fa-sort-up');
}
})