JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery">
    <div class="product">
        <img class="image" src="http://www.petiquettedog.com/wp-content/uploads/2010/04/sadpug.jpg" />
        <div class="caption">
            <p>some text</p>
        </div>
    </div>
        <div class="product">
        <img class="image" src="http://www.petiquettedog.com/wp-content/uploads/2010/04/sadpug.jpg" />
        <div class="caption">
            <p>some text</p>
        </div>
    </div>
</div>

CSS

html, body {
    height: 40%;
    width: 100%;
    margin: 0;
}
#gallery {
    height: 80%;
    width: 100%;
}
.product {
    
    background: #333;
    height: 70%;
    width: 100%;
}
.image {
        position: absolute;
    background: #777;
    height: 100%;
    width: 100%;
}
.caption {
    background: rgba(111, 444, 333, .1);
    width: 100%;
    height: 100%;
    position: absolute;
}