JSFiddle - React, Tailwind, and code Playground

by Ashish Sharma

HTML

<center>

<table>
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>


<table class="obd" id="tableSec">
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>



</center>
</body>
</html>

CSS

body{
background:url(aya.jpg);
}
#tableSec { 
 color: #333;
 font-family: Helvetica, Arial, sans-serif;
 width: 640px; 
 border-collapse: 
 collapse; border-spacing: 0; 
}

#tableSec td, #tableSec th { 
 border: 1px solid black;
 height: 30px; 
 transition: all 0.3s;
}

#tableSec th {
 background: #757575;
 font-weight: bold;
 color:white;
}

#tableSec td {
 background: #FAFAFA;
 text-align: center;
}


tableSec tr:nth-child(even) td { 
background: #F2F2F2; 
}   

#tableSec tr:nth-child(odd) td { 
background: #E6ECF2; 
}