JSFiddle - React, Tailwind, and code Playground

HTML

<table><thead>
      <tr>
         <th>S.L.</th>
         <th>name</th>
      </tr>
     </thead>
    <tbody>
      <tr>
         <td>1</td>
         <td>Ronaldo</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Messi</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Ribery</td>
      </tr>
      <tr>
         <td>4</td>
         <td>Bale</td>
      </tr>
    </tbody>
     </table>

CSS

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table,th,td
{
border:1px solid black;
}
th:hover{
     cursor:pointer;
    background:#AAA;
    
}