JSFiddle - React, Tailwind, and code Playground
HTML
<div id="inventory">
<h2>Inventory</h2>
<ul id="inventory-items">
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">1</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">121</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">1000</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">10</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
<li class="inventory-item">
<img class="invetory-pic" src="https://www.gdrc.psychol.cam.ac.uk/images/apple/image" / alt="">
<span class="inventory-stock">5</span>
</li>
</ul>
</div>
CSS
#inventory-items {
display: flex;
list-style: none;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 300px;
background-color: rgba(0, 0, 0, .2);
}
.inventory-item {
position: relative;
border: 1px solid transparent;
}
.inventory-stock {
position: absolute;
bottom: 5px;
right: 0;
z-index: 1;
background-color: rgba(0, 0, 0, .7);
color: white;
display: inline-block;
padding: 1px 2px;
text-align: center;
font-size: 90%;
}
.invetory-pic {
max-width: 50px;
}