JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div>
Store Name
</div>
<div class="item-container">
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div class="name">Widget</div>
<div class="quantity">12</div>
</div>
<div class="item">
<div class="image" style="/*background-image: url('Artwork/1159.jpg');*/"></div>
<div...
CSS
.item-container {
width: 600px;
background-color: blue;
}
.item {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
}
.image {
height: 100px;
width: 100px;
background-color: green;
}
.name {
background-color: purple;
}
.quantity {
background-color: orange;
}