JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpading="0" cellspacing="0">
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td class="grad">4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
  </tr>
  <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
  </tr>
  <tr>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
      <td>21</td>
  </tr>
</table>

CSS

table {
        table-layout: fixed;
        width: 100%;
    }
    table td {
        border: 1px solid #000000;
        height: 100px;
        vertical-align: mddle;
        text-align: center;
    }
    table td.grad {
        background: linear-gradient(150 , #FF0000 3%, #0E7022 5%);
        background: -o-linear-gradient(150 , #FF0000 3%, #0E7022 5%);
        background: -moz-linear-gradient(150 , #FF0000 3%, #0E7022 5%);
        background: -webkit-linear-gradient(150 , #FF0000 3%, #0E7022 5%);
        background: -ms-linear-gradient(150 , #FF0000 3%, #0E7022 5%);
        
        background: -webkit-gradient(
            linear,
            150 100,
            80 100,
            color-stop(0.03, #FF0000),
            color-stop(0.05, #0E7022)
        );
    }