JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="boxes">
  <li>
    <div class="box box--1">
      <img src="//placehold.it/800x450/ccc" alt="" />
    </div>
  </li>
    <li>
    <div class="box box--2">
     <img src="//placehold.it/800x450/3cc" alt="" />
      
      <a href="#" class="button">ボタン</a>
    </div>
  </li>
    <li>
    <div class="box box--3">
      <img src="//placehold.it/800x450/c3c" alt="" /> 
      
      <a href="#" class="button">
      ボタン</a>
    </div>
  </li>
    <li>
    <div class="box box--4">
      <img src="//placehold.it/800x450/cc3" alt="" />
    </div>
  </li>
</ul>

CSS

body {
  margin: 0;
  padding: 0;
}

.boxes {
  list-style-type: none;
  overflow: hidden; // clearfix
}

.boxes > li {
  width: 50%;
  float: left;
}

.box {
  padding-top: 56.25%;
  position: relative;
}

.box img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.box--1 {
  transform: translate3d(0 ,20px, 0);
}

.box--2 {
  transform: translate3d(-20px , 0, 0);
}

.box--3 {
  transform: translate3d(20px , 0, 0);
}

.box--4 {
  transform: translate3d(-40px, -20px, 0);
}

.button {
  display: block;
  line-height: 40px;
  background: #fff;
  border: 1px solid #000;
  text-align: center;
  position: absolute;
  right: 50px;
  bottom: 50px;
  left: 50px;
  margin: auto;
}