JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
   <li>
     <div></div>
   </li><!--
--><li>
     <div>
       <p>Some text</p>
     </div>
   </li><!--
--><li>
     <div></div>
   </li><!--
--><li>
     <div></div>
   </li>
</ul>

CSS

body, ul, p {margin: 0;padding: 0;}

li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 25%;
  padding-bottom: 25%;
  background-size: cover;
}

li>div {
  position: absolute;
  width: 100%;
  height: 100%;
}

li:nth-child(1) {
  background-image: url(https://www.experiencetravel.nl/media/1739/historisch-hanoi.jpg?center=0.71161048689138573,0.445&mode=crop&width=480&height=480);
}

li:nth-child(2) {
  background: #AE9962
}

li:nth-child(3) {
  background-image: url(https://www.experiencetravel.nl/media/43449/sydney-red-centre-great-ocean-road-3.jpg?anchor=center&mode=crop&width=480&height=480);
}

li:nth-child(4) {
  background-image: url(https://www.experiencetravel.nl/media/46045/the-richardson-3.jpg?anchor=center&mode=crop&width=480&height=480);
}

li p {
  padding: 15px;
}