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 {
      float: left;
      overflow: hidden;
      vertical-align: top;
    }
    
    .inner {
      /* older browsers. you should add the other prefixes too. there are polyfills to have broader support, check link later in the answer */
      display: -webkit-box;
      display: -moz-box;
      display: -ms-box;
      display: box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: reverse;
      -moz-box-direction: reverse;
      -ms-box-direction: reverse;
      box-direction: reverse;
      
      /* newer */
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: flex;
      -moz-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      -webkit-flex-direction: column-reverse;
      flex-direction: column-reverse; /* the meta box is added
    after the image container, and the items are arranged in column */
    
    
    }
    
    .overlay {
      z-index: 2;
      margin: 0 0 -25px; /* magic: this cuts the container by 25px (height of meta bar) */
    }
    
    .actions {
      color: #fff;
      background: rgba(200,0,0,0.8);

      /* older */ 
      display: -webkit-box;
      display: -moz-box;
      display: -ms-box;
      display: box;
      -webkit-box-pack: justify; /* distribute the labels */
      -moz-box-pack: justify; 
      -ms-box-pack: justify; 
      box-pack: justify; 
      -webkit-box-direction: normal; /* reset order (it used to be inherited) */
      -moz-box-direction: normal; 
      -ms-box-direction: normal; 
      box-direction: normal; 
      
      /* newer */
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: flex;
      -webkit-justify-content: space-between; /* distribute the labels */
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      justify-content: space-between;
 ...