JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gradient box"></div>
<table>
<thead>
  <tr>
    <th style="width:20%;">Column 1</th>
    <th style="width:50%;">Column 2</th>
    <th style="width:30%;">Column 3</th>
  </tr>
</thead>
<tbody>
  <tr class="solid"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr class="gradient"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>

CSS

.gradient {
 background-image: linear-gradient(210deg, #FFF133 0%, #16D611 50%, #00A3EF 80%); 
}
.solid {
  background-color: aqua;
}
.box {
  width:200px;
 height:200px;
}
table, tr, td, th {
  border: 2px solid black
}