JSFiddle - React, Tailwind, and code Playground

by Brett DeWoody

HTML

<div class="examples">
   <div class="example"><img src="http://placehold.it/400x400&text=Image1" /></div>
   <div class="example"><img src="http://placehold.it/400x200&text=Image2" /></div>
   <div class="example"><img src="http://placehold.it/400x200&text=Image3" /></div>
   <div class="example"><img src="http://placehold.it/400x400&text=Image4" /></div>
</div>

CSS

.examples {
      position: relative;
      display: block;
      box-sizing: border-box;
    }
    .example {
        width: 25%;
        height: auto;
        position: absolute;
        margin: 0;
        padding: 0;
        display: inline-block;
        box-sizing: border-box;
    }
    .example img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        padding: 0;
    }
    
    .example:nth-child(1) {
      position: relative;
    }
  
    .example:nth-child(3) {
      margin-top: 12.475%;
      margin-bottom:-50%;
    }
    
    .example:nth-child(4) {
      left: 50%;
    }