JSFiddle - React, Tailwind, and code Playground

by aidankirrane

HTML

<div class="item">
    <div style="background-color:red;">&nbsp</div>
    <span class="caption">Red</span>
</div>
<div class="item">
     <div style="background-color:Green;">&nbsp</div>
    <span class="caption">Green</span>
</div>
<div class="item">
       <div style="background-color:blue;">&nbsp</div>
    <span class="caption">Blue</span>
</div>
<div class="item">
       <div style="background-color:bruscar;">&nbsp</div>
    <span class="caption">bruscar</span>
</div>

CSS

div.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;
     border: 1px solid black;
}
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}