JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Applied Panel - Base Left Side</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Applied Panel - Base Right Side</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Base - 3 Drawer Stack w-Applied Door</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Base - 3 Drawer Stack</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Base - 4 Drawer Stack w-Applied Door</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Base - 4 Drawer Stack</span>
</a>
</div>
</div>
<div class="row">
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Applied Panel - Base Left Side</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Applied Panel - Base Right Side</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Base - 3 Drawer Stack w-Applied Door</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Base - 3 Drawer Stack</span>
</a>
</div>
<div>
<a class="item">
<img src="http://dummyimage.com/600x600/000/fff.jpg" />
<span>Base - 4...
CSS
body {
text-align: center;
}
.item {
padding: 20px;
margin-bottom: 10px;
text-align: left;
display: block;
font-size: 0.75em;
}
.row {
margin: 10px;
display: block;
margin-bottom: 25px;
border: solid blue 1px;
height: 100px;
}
.row div {
margin: 0px;
padding: 0px;
box-sizing: border-box;
float: left;
height: 100%;
width: 16.667%
}
.row a {
text-align: center;
margin: 5px;
padding: 20px;
}
.row a * {
display: block;
}
.row img {
width: 100%;
display: inline-block;
}