JSFiddle - React, Tailwind, and code Playground

by leomac

HTML

<table class='mytable'>
    <thead>
        <tr>
            <th>countries</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Country</th>
            <th>Capital</th>
        </tr>            
    </thead>
    <tbody>
        <tr class='odd'>
            <td>1</td>
            <td>Canada</td>            
            <td>Ottawa</td>            
        </tr>        
        <tr>
            <td>2</td>
            <td>France</td>            
            <td>Paris</td>            
        </tr>
        <tr class='odd'>
            <td>3</td>
            <td>Germany</td>            
            <td>Italia</td>            
        </tr>
        <tr>
            <td>4</td>
            <td>Italy</td>            
            <td>Rome</td>            
        </tr>
        <tr class='odd'>
            <td>5</td>
            <td>Russian Federation</td>            
            <td>Moscow</td>            
        </tr>
        <tr>
            <td>6</td>
            <td>Spain</td>            
            <td>Madrid</td>            
        </tr>
        <tr class='odd'>
            <td>7</td>
            <td>United Kingdom</td>            
            <td>London</td>            
        </tr>

    </tbody>
</table>


<table class='mytable' id='users'>
    <thead>
        <tr>
            <th>users</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>IsActor</th>
            <th>IsSinger</th>
            <th>Age</th>            
        </tr>            
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Adriano Celentano</td>  
            <td>1</td>
            <td>1</td>
            <td>82</td>
        </tr>                
        <tr>
            <td>2</td>
            <td>David Tennant</td>            
            <td>1</td>
            <td>0</td>
            <td>48</td>
        </tr>        
        <tr>
            <td>3</td>
            <td>Jean Reno</td>            
        ...

CSS

table.mytable {width: 30em; border: 1px solid #ccc; border-collapse:collapse; margin: 1em 0.5em}
.mytable td {border:1px solid #ccc}
.mytable th {border:1px solid #ccc; background: #eee}