JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<!-- Notice the structure of everything -->
<div id='container'>  <!-- AT DIV LEVEL -- This is the parent div of the table.. and ancestor div to everything inside the table -->
    <table> <!-- AT TABLE LEVEL -- one level up is the div.. one level down and you get the THEAD and TBODY -->
        <thead> <!-- AT THEAD LEVEL -- one level up is the table.. one level down and you get the tr -->
            <tr>  <!-- AT TR LEVEL -- one level up is the thead .. one level down and you get the th -->
                <th>Name</th>  <!-- AT TH LEVEL -- one level down and you get the tr and there are no levels below this -->
                <th>Age</th>  <!-- everything at the same level is a sibling -->
                <th>Sex</th>
                <th>Birthday</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>20</td>
                <td>Male</td>
                <td>07/25/1992</td>
            </tr>
            <tr>
                <td>Carol</td>
                <td>23</td>
                <td>Female</td>
                <td>05/25/1989</td>
            </tr>
            <tr>
                <td>Sue</td>
                <td>18</td>
                <td>Female</td>
                <td>03/16/1994</td>
            </tr>
        </tbody>
    </table>
<div>

CSS

#container th,#container td {
 border: 1px solid red;
 padding: 0px 5px 0px 5px;    
}

#container th {
 background-color: grey;
}

#container td {
 background-color: lightblue;
}