JSFiddle - React, Tailwind, and code Playground

by Devidas Kadam

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row trail-row">
    <div class="col-md-12 col-lg-12">
       <div class="trail-title">
           Audit Trail
       </div>
    </div>
    <div class="col-md-12 col-lg-12">
       <div class="trail-table">
           <table class="table">
             <thead>
               <tr>
                 <th class="text-left">To</th>
                 <th class="text-center">Crew ID</th>
                 <th class="text-center">From</th>
                 <th class="text-center">Subject</th>
                 <th class="text-center">Created Date</th>
                 <th class="text-center">Created By</th>
                 <th class="text-center">Sent Flag</th>
                 <th class="text-center">Sent Date</th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td class="text-left">finra</td>
                 <td class="text-center">
                   <a href="">12345</a>
                 </td>
                 <td class="text-center">sadsa</td>
                 <td class="text-center">Subject here</td>
                 <td class="text-center">12/12/2022</td>
                 <td class="text-center">Lorem</td>
                 <td class="text-center">Sent</td>
                 <td class="text-center">12/12/2022</td>
               </tr>
               <tr>
                 <td class="text-left">finra</td>
                 <td class="text-center">
                   <a href="">12345</a>
                 </td>
                 <td class="text-center">sadsa</td>
                 <td class="text-center">Subject here</td>
                 <td class="text-center">12/12/2022</td>
                 <td class="text-center">Lorem</td>
                 <td class="text-center">Sent</td>
                 <td class="text-center">12/12/2022</td>
               </tr>
             </tbody>
           </table>
 ...

SCSS

.trail-row {
  margin-top:50px;
  .trail-title {
    background-color:#d8d8d8;
    padding:10px;
    font-size:20px;
    font-weight:bold;
  }
  .trail-table{
    margin-top:5px;
    padding:10px;
    table {
      border-spacing:0;
      border:1px solid #d8d8d8;
      border-top:0;
      thead tr th{
      background-color:#d8d8d8;
    }
    tbody tr {
        &:nth-child(odd) {background-color: #f0f0f0;}
        td {
        padding: 5px;
      }
    }
    }
  }
}