JSFiddle - React, Tailwind, and code Playground

HTML

<table id="list-view-table">
  <thead class="table-header">
    <tr>
      <th class='header-narrow priority-high'>
        <div>
        1
        </div>
      </th>
      <th class='header-wide priority-low'>
        <div>

        </div>
      </th>
      <th class='header-wide priority-low'>
        <div>
        3
        </div>
      </th>
      <th class='header-wide priority-high'>
        <div>
        4
        </div>
      </th>
      <th class='header-narrow priority-high'>
        <div>
        5
        </div>
      </th>
            <th class='header-narrow priority-high'>
        <div>
        1
        </div>
      </th>
      <th class='header-wide priority-low'>
        <div>

        </div>
      </th>
      <th class='header-wide priority-low'>
        <div>
        3
        </div>
      </th>
      <th class='header-wide priority-high'>
        <div>
        4
        </div>
      </th>
      <th class='header-narrow priority-high'>
        <div>
        5
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="priority-high" nowrap>
        <div>
          <div class="fa fa-user-circle">
          </div>
        </div>
      </td>
      <td class="priority-low" nowrap>
        <div>
          <div class="text">
            <div class='super-wide-hidden-stuff'>
              aaaaaaaaaaaaaaaaaaaaaa
            </div>
          </div>
        </div>
      </td>
      <td class="priority-low" nowrap>
        <div>
          <div class="text">
            Some Text Here 2
          </div>
        </div>
      </td>
      <td class="priority-high" nowrap>
        <div class="text">
          Some Text Here 3
        </div>
      </td>
      <td class="priority-high" nowrap>
        <div class="centred-wrapper">
          <div>
            +
          </div>
        </div>
      </td>      <td class="priority-high" nowrap>
        <div>
          <div class="fa fa-user-circle">
          </div>
        </div>
     ...

CSS

body {
   background-color: red;
}

table {
  border-collapse: collapse;
  border-top-right-radius: 4px;
  font-family: Roboto, sans-serif;
  table-layout: fixed;
  outline: 2px solid grey;
  width: 98%;
  margin: auto;
}
.table-header{
  background-color: grey;
}
th{
  height: 50px;
  font-size: 12px;
  text-align: left;
  color: purple;
  cursor: pointer;
  display: table-cell;
  padding-left: 8px;
  padding-right: 8px;
}
th > div{
  display: inline-block;
  vertical-align: middle;
}
tr > th:first-of-type > div:first-of-type
{
  padding-left: 5%;
}
tr > td:first-of-type > div:first-of-type
{
  padding-left: 5%;
}
.selected-header{
  color: blue;
}
.sort-icon{
  color: blue;
  font-size: 24px;
  font-weight: bold;
}
td{
  font-size: 14px;
  height: 44px;
  padding-left: 8px;
  padding-right: 8px;
}

.icon{
  color: purple;
  font-size: 24px;
  cursor: pointer;
  text-align: right;
}
.data-row{
  border-bottom: solid 2px grey;
  cursor: pointer;
}
.data-area{
  border-bottom: solid 2px grey;
}
tr:last-child{
  border-bottom: none;
}
.data-view-td{
  padding:0;
}
.faded{
  opacity: 0.3;
}
.header-narrow{
  width: 5%;
  text-align: center;
}
.header-wide{
  width: initial;
}
.checkbox{
  width: 20px;
  height: 20px;
  margin: auto;
}
.image-circle{
  border-radius: 50%;
  height: 40px;
  width: 40px;
  vertical-align: middle;
}
.sort{
  display: inline-block;
  vertical-align: middle;
}
.fa-user-circle{
  color: grey;
  font-size: 30px;
}
.centred-data{
  width: fit-content;
  margin: auto;
}

@media(min-width: 667px) and (max-width: 767px){
  .priority-low {
    display: none;
  }
  .header-wide {
    width: 12vw;
  }
  .header-narrow{
    width: 3.5vw;
  }
  table {
    width: 94vw;
  }
  td {
    padding-left: 2vw;
    padding-right: 2vw;
  }
  th:last-child.header-wide {
    min-width: 12vw;
  }
  th:last-child.header-narrow {
    min-width: 3.5vw;
  }
}

@media(max-width: 666px) {
  .priority-low {
    display: none;
  }
  .priority-medium {
    display:...