JSFiddle - React, Tailwind, and code Playground

by Konstantin Rouda

HTML

<div class="c-wrapper">
  

<figure class="c-container">
  <img src="https://res.cloudinary.com/css-tricks/image/fetch/w_600,q_auto,f_auto/https://cdn4.buysellads.net/uu/7/78899/1608050463-unity_-_600x600.jpg" alt="">
</figure>

</div>

CSS

.c-wrapper {
  display: flex;
      flex-direction: column;
    flex-grow: 1;
    align-items: center;
}

.c-container {
  position: relative;
  margin-top: 20vh;
}

.c-container::before {
  content: "";
  position: absolute;
  left: 66%;
  width: 300px;
  height: 300px;
  background: red;
  z-index: -1;
}