JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://carenthusiast.com/news0409/fiat_600.jpg"></script>
<div class="videoThumb">
    <img src="http://www.chainreactiondisco.com/images/disco_panel_02_01.jpg">
    <span class="details">
      <!-- containing element for black box -->
        <p>
            Watch<br />
            Signature Manager vs. Mail Dislcaimers
        </p>
       
        
    <span><!-- /details -->
</div><!-- /videoThumb -->

CSS

img {
    width: 100%;
    max-width: 100%;
}
.videoThumb {
    position: relative;
    display: inline-block;
    padding: 0;
}

.videoThumb .details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #000;
    background-color: red;
}
.details p {
    display: block;
    padding: 14px 4%;
    margin: 0;
}