JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hello">
  <ul>
     <li>
       <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Random-image.jpg" class="image">
       <p>on sale</p>
     </li>
     <li>
       <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Random-image.jpg" class="image">
       <p>special offers</p>
     </li>
     <li>
       <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Random-image.jpg" class="image">
       <p>must have</p>
     </li>
  </ul>
</div>

CSS

.hello {
  background: rgb(36, 36, 36);
  box-shadow: 0 -9999px 0 9999px rgb(36, 36, 36);
  z-index: 1;
  position: relative;
  height: 230px;
  width:940px;
  display: block;
}

.hello ul{
  display:flex;

  justify-content: space-between;
}

.hello li {
  margin: 24px 0px;
	display: flex;
}

.hello img{
  height:180px;
  width:300px;
  justify-content: space-between;
}

.hello li p{
		text-transform: uppercase;
		background:rgba(36,36,36,0.5);
		color:white;
		width:180px;
		height:60px;
		position: absolute;               
    left: 50%;                       
    top: 50%;   
		transform: translate(-50%,-50%) ;
		justify-content: center;
  	align-items: center;
  	text-align: center;
  	display: inline-flex;
}