JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="block">
    <a href="#" >
      <div class="block-2">
          <img src="http://i.imgur.com/30ObIl5.png" class="image-1">
          <img src="http://i.imgur.com/ZaT62wh.png" class="image-2">
          <div class="image-3"></div>
      </div>
    </a>
  </div>
  <div class="block">
    <a href="#" >
      <div class="block-2">
          <img src="http://i.imgur.com/30ObIl5.png" class="image-1">
          <img src="http://i.imgur.com/ZaT62wh.png" class="image-2">
          <div class="image-3"></div>
      </div>
    </a>
  </div>
  <div class="block">
    <a href="#" >
      <div class="block-2">
          <img src="http://i.imgur.com/30ObIl5.png" class="image-1">
          <img src="http://i.imgur.com/ZaT62wh.png" class="image-2">
          <div class="image-3"></div>
      </div>
    </a>
  </div>
  <div class="block">
    <a href="#" >
      <div class="block-2">
          <img src="http://i.imgur.com/30ObIl5.png" class="image-1">
          <img src="http://i.imgur.com/ZaT62wh.png" class="image-2">
          <div class="image-3"></div>
      </div>
    </a>
  </div>
</div>

CSS

.container {
  margin: 0 auto;
  width: 1140px;
  background: #D5D5D5;
  font-size: 0;
}

.block {
    display: inline-block;

}

.block-2 {
    width: 380px;
    height: 250px;
    position: relative;
    overflow: hidden;

}

.image-1 {
    top: -10px;
    left: -20px;
    position: absolute;
}

.image-2 {
    top: -10px;
    left: -20px;
    position: absolute;
}

.image-3 {
    background: url('http://i.imgur.com/djePMOX.png');
    width: 420px;
    height: 60px;
    position: absolute;
    left: -20px;
    bottom: 0;
}