No, the mobile version doesn't use cards in your code. You're simply adding an overflow scroll. Please look at the following html and css and turn it into tailwind : <table class="sc-responsive-table"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Salary</th> <th>Hours Worked</th> <th>Overtime Hours</th> <th>Total Pay</th> </tr> </thead> <tbody> <tr> <td data-label="Name">John Doe</td> <td data-label="Position">Software Engineer</td> <td data-label="Salary">$4,500</td> <td data-label="Hours Worked">160</td> <td data-label="Overtime Hours">10</td> <td data-label="Total Pay">$5,000</td> </tr> <tr> <td data-label="Name">Jane Smith</td> <td data-label="Position">Project Manager</td> <td data-label="Salary">$5,000</td> <td data-label="Hours Worked">160</td> <td data-label="Overtime Hours">5</td> <td data-label="Total Pay">$5,500</td> </tr> <tr> <td data-label="Name">Michael Brown</td> <td data-label="Position">Data Analyst</td> <td data-label="Salary">$4,000</td> <td data-label="Hours Worked">160</td> <td data-label="Overtime Hours">8</td> <td data-label="Total Pay">$4,800</td> </tr> <tr> <td data-label="Name">Emily Johnson</td> <td data-label="Position">UX Designer</td> <td data-label="Salary">$4,200</td> <td data-label="Hours Worked">160</td> <td data-label="Overtime Hours">6</td> <td data-label="Total Pay">$4,620</td> </tr> </tbody> </table> CSS : .sc-responsive-table { width: 100%; border-collapse: collapse; margin: 20px 0; text-align: left; font-size: 15px; } .sc-responsive-table thead { background-color: #333; color: #fff; } .sc-responsive-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,.03); } .sc-responsive-table th, .sc-responsive-table td { padding: 10px 15px; border-bottom: 1px solid rgba(0,0,0,.06); } @media only screen and (max-width: 767px) { .sc-responsive-table thead { display: none; } .sc-responsive-table tbody { display: block; width: 100%; } .sc-responsive-table tbody tr, .sc-responsive-table tbody tr:nth-child(even) { background-color: rgba(0,0,0,.03); } .sc-responsive-table tr { display: block; padding: 15px; margin-bottom: 15px; } .sc-responsive-table td { display: flex; align-items: center; justify-content: space-between; text-align: right; font-weight: 700; padding-left: 0; padding-right: 0; } .sc-responsive-table td:before { content: attr(data-label); margin-right: auto; font-weight: 400; } .sc-responsive-table td:last-child {border-bottom: 0; } }