JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-block">
    <img src="http://lorempixel.com/500/400/nature" alt="nature">
    <div class="text">
        <h2>Blah Blah</h2>
        <p>J'aime la nature</p>
    </div>
</div>
    <p>Et la suite…</p>

CSS

.img-block {
    display: inline-block;
    position: relative;
}
.img-block img {
    display: block;
}
.img-block .text {
    position: absolute;
    width: 95%;
    padding: 2.5%;
    background: rgba(0,0,0,0.6);
    color: white;
    bottom: 0;
    left: 0;
}