JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
    <tr class="gradiented">
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>
<br />
<div class="gradiented" style="width: 100px; height: 100px;">
  Foo
</div>

CSS

.gradiented {
  background-color: lightblue;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
  background-size: calc(100%) 1px;
  background-repeat: no-repeat;
  background-position: top, 0 0;
}