JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<table class="test">

<tr class="odd">
    <td>1</td>
    <td>Name</td>
    <td>Salary</td>
    <td>Description</td>
</tr>

<tr class="even">
    <td>2</td>
    <td>Name</td>
    <td>Salary</td>
    <td>Description</td>
</tr>

<tr class="odd">
    <td>3</td>
    <td>Name</td>
    <td>Salary</td>
    <td>Description</td>
</tr>

<tr class="even">
    <td>4</td>
    <td>Name</td>
    <td>Salary</td>
    <td>Description</td>
</tr>
    
</table>

CSS

.test{
    width:100%;
}
td{word-break:break-word; float:right; width:100px; }
.odd, .even
{
   background-color: #f4f4f4;
    border: 1px solid black;
    border-radius: 3px;
    display: inline-block;
    float: left;
    height: 125px;
    margin-left: 1.5%;
    margin-top: 1.5%;
    width: 30%;   
    
}