Responsive Dynamic Table - Copy this Html, Tailwind Component to your project

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; } }