JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div id="all">
    <div class="imageSub">
        <!-- Put Your Image Width -->
        <img src="http://zkusebny2.chlupac.com/images/test.jpg" alt="Something" />
        <div class="blackbg">Label Goes Here</div>
    </div>
</div>

CSS

#all {
        background:black;
    }
    div.imageSub {
        margin-left:40px;
        position: relative;
    }
    div.imageSub img {
        z-index: 1;
        border-radius: 12px 12px 15px 15px;
    }
    div.imageSub div {
        position: absolute;
        bottom: 4px;
        width:100%;
        padding: 4px;
    }
    div.imageSub div.blackbg {
        z-index: 2;
        color: #000;
        border-radius: 0px 0px 12px 12px;
        background-color: #000;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        opacity: 0.7;
        width: 554px;
        height: 40px;
    }
    div.imageSub div.label {
        z-index: 3;
        color: white;
    }