JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head></head><body>

Body

<section>
    
    Section   
    <figure>
        <img src="http://www.phibetaiota.net/wp-content/uploads/2012/10/Google-Data-Center.jpg">
        <figcaption>Example caption goes here and it's pretty long long long long long...</figcaption>
    </figure>

</section>
</body>
</html>

CSS

section figure {
    position: relative;
    margin: 0 auto; /* to center it */
    padding: 30px 0 0 0;  
   
    font-size: 15px;
    text-align: center;
}
section figure img {
    max-width: 100%;
    vertical-align: middle; /* to make sure images behave like blocks */
}

section figure figcaption {
    position: absolute;
    right: 0; bottom: 0; left: 0;
    
    background: black; /* fallback */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bb000000, endColorstr=#bb000000); /* IE fix */
    background: rgba(0,0,0,.7); /* transparent background */  
    color: #fff; 
    
    padding: 10px;    /* padding around text */
}




section {
    padding-bottom: 30px; /* ignore, just to make it look nice */
    background: #ccc;
}