JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100%; padding: 100px;">
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>datetime</th>
      <th>std_cat</th>
      <th>normal</th>
      <th>sat2</th>
      <th>sat3</th>
      <th>sat4</th>
      <th>total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>14</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.02</td>
      <td>7380</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>7380</td>
    </tr>
    <tr>
      <th>8</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.03</td>
      <td>8280</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>8280</td>
    </tr>
    <tr>
      <th>11</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.04</td>
      <td>17640</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>17640</td>
    </tr>
    <tr>
      <th>10</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.05</td>
      <td>14640</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>14640</td>
    </tr>
    <tr>
      <th>4</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.06</td>
      <td>6839</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>6840</td>
    </tr>
    <tr>
      <th>22</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.07</td>
      <td>4860</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>4860</td>
    </tr>
    <tr>
      <th>5</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.08</td>
      <td>2279</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>2280</td>
    </tr>
    <tr>
      <th>2</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.09</td>
      <td>1500</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>1500</td>
    </tr>
    <tr>
      <th>3</th>
      <td>2018-07-30 00:00:00</td>
      <td>0.10</td>
      <td>1499</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>1500</td>
    </tr>
    <tr>
      <th>17</th>
 ...

CSS

*, *::before, *::after {
  box-sizing: border-box;
}
:root {
  --color-1: #043FF1;
  --color-2: #3061F3;
  --color-3: #6689F3;
  --color-4: #A0B6F6;
  --color-5: #F4F6FE;
  --font-color-1: #fff;
  --font-color-2: #fff;
  --font-color-3: #1D1905;
  --font-color-4: #1D1905;
  --font-color-5: #1D1905;
}
table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  height: 30px;
}
tbody > tr {
  text-align: right;
}
tbody > tr:nth-child(even) {
  background: var(--color-4);
  color: var(--font-color-4);
}
tbody > tr:nth-child(odd) {
  background: var(--color-5);
  color: var(--font-color-5);
}
tbody > tr:hover {
  background: var(--color-1);
  color: var(--font-color-1);
}
thead {
  background: var(--color-2);
  color: var(--font-color-2);
}
th, td {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid gray;
}
tbody > tr > th {
  background: var(--color-3);
  color: var(--font-color-3);
}