JSFiddle - React, Tailwind, and code Playground

by mmetsalu

HTML

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg">
  <tr>
      <td><b>I'm data1</b></td>
      <td><b>I'm data1</b></td>
      <td><b>I'm data1</b></td>
  </tr>
  <tr>
      <td><b>I'm data2</b></td>
      <td><b>I'm data2</b></td>
      <td><b>I'm data2</b></td>
  </tr>
  <tr>
    <td><b>I'm data3</b></td>
    <td><b>I'm data3</b></td>
    <td><b>I'm data3</b></td>
  </tr>
</table>

CSS

body {font-family:arial, sans-serif; font-weight:300;}

tr td:first-child b{color:blue;}
tr td:first-child + td b{color:red;}
tr td:first-child + td + td b{color:green;}