JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td class="book" rowspan="10"><img src="http://placehold.it/220x370" alt=""></td>
<td>ISBN: 12345</td>
</tr>
<tr>
<td>Title: Sed porttitor lectus nibh.</td>
</tr>
<tr>
<td>Author's name: John Doe</td>
</tr>
<tr>
<td>Edition: 1</td>
</tr>
<tr>
<td>Year: 2017</td>
</tr>
<tr>
<td>Category: Fiction</td>
</tr>
<tr>
<td>Publisher: Pellentesque</td>
</tr>
<tr>
<td>Quantity in stock: 1000</td>
</tr>
<tr>
<td>Price: 50.00</td>
</tr>
<tr>
<td><a href="#">Order Now</a></td>
</tr>
</table>
<table>
<tr>
<td class="book" rowspan="10"><img src="http://placehold.it/220x370" alt=""></td>
<td>ISBN: 12345</td>
</tr>
<tr>
<td>Title: Sed porttitor lectus nibh.</td>
</tr>
<tr>
<td>Author's name: John Doe</td>
</tr>
<tr>
<td>Edition: 1</td>
</tr>
<tr>
<td>Year: 2017</td>
</tr>
<tr>
<td>Category: Fiction</td>
</tr>
<tr>
<td>Publisher: Pellentesque</td>
</tr>
<tr>
<td>Quantity in stock: 1000</td>
</tr>
<tr>
<td>Price: 50.00</td>
</tr>
<tr>
<td><a href="#">Order Now</a></td>
</tr>
</table>
<table>
<tr>
<td class="book" rowspan="10"><img src="http://placehold.it/220x370" alt=""></td>
<td>ISBN: 12345</td>
</tr>
<tr>
<td>Title: Sed porttitor lectus nibh.</td>
</tr>
<tr>
<td>Author's name: John Doe</td>
</tr>
<tr>
<td>Edition: 1</td>
</tr>
<tr>
<td>Year: 2017</td>
</tr>
<tr>
<td>Category: Fiction</td>
</tr>
<tr>
<td>Publisher: Pellentesque</td>
</tr>
<tr>
<td>Quantity in stock: 1000</td>
</tr>
<tr>
<td>Price: 50.00</td>
</tr>
<tr>
<td><a href="#">Order Now</a></td>
</tr>
</table>
CSS
table {
border: 1px solid black;
float: left;
margin: 10px;
}
table td {
padding-left: 20px;
}
.book{
width:230px;
height:390px;
box-shadow: 0 0 20px #aaa;
margin: 25px;
padding: 10px 10px 0 10px;
vertical-align: top;
transition: height 1s;
}