JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<table>
<thead>
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td data-name="id">12345</td>
     <td data-name="name">hello</td>
  </tr>
   <tr>
    <td data-name="id">12345</td>
     <td data-name="name">hello</td>
  </tr>
</tbody>
</table>

CSS

table {
  display: block;
}
thead {
  display: none;
}
tbody {
  display: flex;
}
tr {
  display: block;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 5px;
}
tr:before {
  content: 'hello';
  display: block;
  background: #eee;
  padding: 10px;
  text-align: center;
}
td {
  display: block;
}
td::before {
  content: attr(data-name) ":";
  font-weight: bold;
}