JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<table border="1" class="sample">
    <tr>
        <th>Employee</th>
        <th>Salary</th>
        <th></th>
    </tr>
    <tr>
        <td>EMP1</td>
        <td>10000</td>
        <td>
            <input id="btn1" type="button" value="Submit"/>
        </td>
    </tr>
    <tr>
        <td>EMP2</td>
        <td>12000</td>
        <td>
            <input id="btn2" type="button" value="Submit" disabled="disabled" />
        </td>
    </tr>
</table>

CSS

table.sample {
    border: 6px inset #8B8378;
    border-radius: 6px;
}
table.sample td {
    border: 1px solid black;
    padding: 0.2em 2ex 0.2em 2ex;
    color: black;
}
table.sample tr:nth-child(even) td {
    background-color: #FCF6CF;
}
table.sample tr:nth-child(odd) td {
    background-color: #FEFEF2;
}