JSFiddle - React, Tailwind, and code Playground
HTML
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Thumbnail</th>
<th>Title</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</table>
CSS
thead > tr { display: none; }
tbody { display: flex; }
tbody > tr {
display: flex;
flex-direction: column;
align-items: center;
margin: 5px;
border: 1px solid black;
}
tbody > tr > td {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 5px;
}
tbody > tr > td img {
width: 100px;
height: 65px;
}
tbody > tr > td:last-child {
flex-direction: row;
}
tbody > tr > td:last-child button {
margin: 5px;
}