JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>メールアドレス</th>
      <th>状態</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <td>浜松太郎</td>
    <td>hamamatsu@example.com</td>
    <td class="init">初期</td>
    <td><a href="#">詳細リンク</a></td>
  </tr>
    <tr>
      <td>次郎</td>
      <td>some@example.ne.jp</td>
      <td class="annul">無効</td>
    <td><a href="#">詳細リンク</a></td>
    </tr>
    <tr>
      <td>テストユーザー</td>
      <td>test@example.com</td>
      <td class="complete">完了</td>
    <td><a href="#">詳細リンク</a></td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}
tr, td, th {
  border: solid 1px black;
}
thead {
  background-color: #bbf;
}
/* テーブルの行の上にマウスをのせると背景色が変わる */
tbody tr:hover {
  background-color: #ccffff;
}
/* 状態を見やすくするために背景色を特別に変える */
td.init {
  background-color: white;
}
td.annul {
  background-color: #f00;
  color: #fff;
}
td.complete {
  background-color: #8f8;
}

td {
  mix-blend-mode: multiply;
}