JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo1">
  <div class="base">
    <div class="clip">
       <img src="http://bcnshop.barcelonaturisme.com/files/5531-376-imagenCAT/227tipo4j.jpg" class="inner"></img>	
    </div>
  </div>
  <div class="base">
    <div class="clip">
       <img src="http://bcnshop.barcelonaturisme.com/files/5531-374-imagenCAT/227tipo4k.jpg" class="inner"></img>	
    </div>
  </div>
  <div class="base">
    <div class="clip">
       <img src="http://bcnshop.barcelonaturisme.com/files/5531-376-imagenCAT/227tipo4j.jpg" class="inner"></img>	
    </div>
  </div>
  <div class="base">
    <div class="clip terminator">
    </div>
  </div>
</div>
<div class="demo2">
  <div class="base">
    <div class="clip">
       <img src="http://bcnshop.barcelonaturisme.com/files/5531-376-imagenCAT/227tipo4j.jpg" class="inner"></img>	
    </div>
  </div>
  <div class="base">
    <div class="clip">
       <img src="http://bcnshop.barcelonaturisme.com/files/5531-374-imagenCAT/227tipo4k.jpg" class="inner"></img>	
    </div>
  </div>
  <div class="base">
    <div class="clip">
       <img src="http://bcnshop.barcelonaturisme.com/files/5531-376-imagenCAT/227tipo4j.jpg" class="inner"></img>	
    </div>
  </div>
  <div class="base">
    <div class="clip terminator">
    </div>
  </div>
</div>

CSS

.demo1, .demo2 {
    overflow-y: hidden;
}
.base {
    width: 100px;
    height: 100px;
    float: left;
}

.image1 {background-image: url("bosque.jpg")}

.clip {height: 177%; width: 125%; margin-top: -40%;-webkit-transform-origin: 0% 50%; overflow: hidden}
.inner {-webkit-transform-origin: 0% 50%;margin-left: -151%;margin-top: 19%;}
.terminator {background-color: white}

.demo1 .clip {-webkit-transform: rotate(15deg);}
.demo1 .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(odd) .clip {-webkit-transform: rotate(15deg);}
.demo2 :nth-child(odd) .inner {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .clip {-webkit-transform: rotate(-15deg);}
.demo2 :nth-child(even) .inner {-webkit-transform: rotate(15deg);margin-left: -151%;margin-top: -30%;}