JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1 outofstock">
</div>
<div class="box2 outofstock">
</div>
<div class="box3 outofstock">
</div>
<div class="box4 outofstock">
</div>

CSS

div.outofstock:after {
  background: transparent url(http://www.computingsystem.in/img/outofstock.png) no-repeat center;
  background-size: contain;
  content: " ";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
}

div {
  display: inline-block;
  width: 100px;
  height: 75px;
  background-color: #800;
  position: relative;
}
.box2 {
  width: 200px;
  height: 100px;
}
.box3 {
  width: 250px;
  height: 100px;
}
.box4 {
  width: 500px;
  height: 300px;
}