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 {
      content: "Out of Stock";
      display: block;
      position: absolute;
      width: 100%;
      text-align: center;
      color: #fff;
      top: 50%;
      transform: translateY(-50%) rotate(-20deg);
    }

    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;
    }