JSFiddle - React, Tailwind, and code Playground

by karin

HTML

<table border="1">
<thead>
  <tr>
    <th>Header1</th><th>Header2</th><th>Header3</th>
  </tr>
</thead>
  <tbody>
    <tr>
      <td><span>data1</span><span>data2</span><span>data3</span></td>
      <td><span>data12</span><span>data22</span><span>data32</span></td>
      <td><span>data13</span><span>data23</span><span>data33</span></td>
    </tr>
    <tr>
      <td><span>data1</span><span>data2</span><span>data3</span></td>
      <td><span>data12</span><span>data22</span><span>data32</span></td>
      <td><span>data13</span><span>data23</span><span>data33</span></td>
    </tr>
    <tr>
      <td><span>data1</span><span>data2</span><span>data3</span></td>
      <td><span>data12</span><span>data22</span><span>data32</span></td>
      <td><span>data13</span><span>data23</span><span>data33</span></td>
    </tr>
    <tr>
      <td><span>data1</span><span>data2</span><span>data3</span></td>
      <td><span>data12</span><span>data22</span><span>data32</span></td>
      <td><span>data13</span><span>data23</span><span>data33</span></td>
    </tr>
  </tbody>
</table>

CSS

table{
  width:100%;
}
table tr td{
  text-align:left;
}
td span:first-child {
  background: yellow;
}

td span:nth-child(2) {
  background: salmon;
}

td span:nth-child(3) {
  background: DarkTurquoise;
  float:right;
}