JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="flex">
    <div class="wrap">
        <div class="image">
            <img src="http://placehold.it/600x600" />
        </div>
        <div class="back">
            <div class="text">
                 <h5>Header</h5>
                 <h2>Some text would go here and then it would do this</h2>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="image">
            <img src="http://placehold.it/600x600" />
        </div>
        <div class="back">
            <div class="text">
                 <h5>Header</h5>
                 <h2>Some text would go here and then it would do this</h2>
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="image">
            <img src="http://placehold.it/600x600" />
        </div>
        <div class="back">
            <div class="text">
                 <h5>Header</h5>
                 <h2>Some text would go here and then it would do this</h2>
            </div>
        </div>
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
}
.flex {
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
}
.wrap {
    box-sizing:border-box;
    flex-basis:33.333%;
    position:relative;
    margin:20px;
}
.image {
    position:absolute;
}
.image img {
    width:100%;
}
.back {
    background-color:yellow;
    position:relative;
    z-index:5;
    margin-top:80%;
}
.text {
    position:relative;
    padding:20px;
}