JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<article>
    <div class="inner">
        <div class="overlay">
            <div class="actions">
                <div class="text">Text</div>
                <div class="yep">Yep</div>
                <div class="heretoo">Here too</div>
            </div>
        </div>
        <div class="content">
            <img src="http://placehold.it/200x800">                        
        </div>
    </div>
</article>
<article>
    <div class="inner">
        <div class="overlay">
            <div class="actions">
                <div class="text">Text</div>
                <div class="yep">Yep</div>
                <div class="heretoo">Here too</div>
            </div>
        </div>
        <div class="content">
            <img src="http://placehold.it/400x100">                        
        </div>
    </div>
</article>
<article>
    <div class="inner">
        <div class="overlay">
            <div class="actions">
                <div class="text">Text</div>
                <div class="yep">Yep</div>
                <div class="heretoo">Here too</div>
            </div>
        </div>
        <div class="content">
            <img src="http://placehold.it/100x100">                        
        </div>
    </div>
</article>
<article>
    <div class="inner">
        <div class="overlay">
            <div class="actions">
                <div class="text">Text</div>
                <div class="yep">Yep</div>
                <div class="heretoo">Here too</div>
            </div>
        </div>
        <div class="content">
            <img src="http://placehold.it/1400x600">                        
        </div>
    </div>
</article>

CSS

article {
display: inline-block;
overflow: hidden;
vertical-align: top;
}

.inner {
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
}

.overlay {
z-index: 2;
}

.actions {
display: -webkit-flex;
-webkit-justify-content: space-between;
margin-top: -25px;
background: rgba(200,0,0,0.8);
box-shadow: 0 -1000px 0 1030px rgba(0,0,0,.6);
color: #fff;
font-size: 1.4vw;
}

.content {
z-index: 1;
display: -webkit-flex;
}

.content img {
max-width: 40vw;
max-height: 65vh;
}