JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<table>
        <tr>
          <td><span class="txt-label">Model Year :</span> <span class="value">{{vinResults[0].modelYear}}</span></td>
          <td><span class="txt-label">Fuel :</span> <span class="value">{{vinResults[0].fuel}}</span></td>
        </tr>
        <tr>
          <td><span class="txt-label">Make :</span> <span class="value">{{vinResults[0].make}}</span></td>
          <td><span class="txt-label">Brake System :</span> <span class="value">{{vinResults[0].brakeSystem}}</span></td>
        </tr>
        <tr>
          <td><span class="txt-label">Vehicle Line :</span> <span class="value">{{vinResults[0].vehicleLine}}</span></td>
          <td><span class="txt-label">GVWR Class :</span> <span class="value">{{vinResults[0].GVWRClass}}</span></td>
        </tr>
    </table>

CSS

*{
  box-sizing:border-box;
}
table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      margin-top:40px;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 15px;
    }

    tr:nth-child(odd) {
      background: #F1F4F6 0% 0% no-repeat padding-box;  
        opacity: 1;
    } 
    tr td .txt-label{
      min-width:125px;
      display:inline-block;
    }
    
    @media(max-width:767.9px){
       td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 15px;
          display:block;
          width:100%;
        }
        tr:nth-child(odd) {
          background: transparent;  
         } 
        tr td:nth-child(odd) {
          background: #F1F4F6 0% 0% no-repeat padding-box;  
          opacity: 1;
        } 
    }