JSFiddle - React, Tailwind, and code Playground

by saurabh moghe

HTML

<table  style="display:table-header-group"  class="grey"  ><thead>
	 		<tr>
				<th  > First Name </th>
				<th  >Last Name</th>
				<th   >Unique Reference Id</th>
				<th   >Country</th>
				<th  >Branch</th>
				<th  >Location</th>
				<th  >Card No</th>
				<th   >Percentage</th>

			</tr>
               </thead> 
    
    <tbody class="tblebody" >
        <tr>
         <td  > Adam</td>
             <td  >Gil</td>
             <td > 0067 </td>
             <td  > Australia</td>
             <td >  Sydney</td>
             <td > Sydney AU </td>
             <td  >67543 </td>
             <td >50%</td>
        </tr>
        
                <tr>
         <td  >fdff </td>
             <td >john</td>
             <td > smith </td>
             <td > Australia</td>
             <td  >  Sydney</td>
             <td  > Sydney, AU </td>
             <td  > 8543554</td>
             <td >60%</td>
        </tr>
                <tr>
         <td style="width:200px" > mike</td>
             <td  >trot</td>
             <td > NT681 </td>
             <td  > Australia</td>
             <td > TCFA - Sydney</td>
             <td > Sydney, AU (A)</td>
             <td  > </td>
             <td >Camp</td>
        </tr>
                <tr>
         <td > saheb</td>
             <td  >saheb</td>
             <td> NT681 </td>
             <td  > Australia</td>
             <td > TCFA - Sydney</td>
             <td  > Sydney, AU (A)</td>
             <td  > </td>
             <td >Camp</td>
        </tr>        <tr>
         <td > saheb</td>
             <td  >saheb</td>
             <td > NT681 </td>
             <td  > Australia</td>
             <td  > TCFA - Sydney</td>
             <td  > Sydney, AU (FA)</td>
             <td  > </td>
             <td >Camp</td>
        </tr>
        
    </tbody>

CSS

grey {

  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: transparent;
   border: 1px; solid #A4A4A4;
}
.grey {
  width: 100%;
  margin-bottom: 18px;
}
.grey th,
.grey td,
.grey tr {
  padding: 8px;
   spacing:10px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}
.grey th {
  font-weight: bold;
   background:#D8D8D8;
}
.grey thead th {
  vertical-align: bottom;
   background:#D8D8D8;
}

.grey tbody tr:nth-child(even){
  background:#FFFFFF;
}
.grey tbody tr:nth-child(odd){
  background:#CEE3F6;
}
.tblebody
{
 display :block;
overflow-y: auto; 
max-height: 150px;
}