JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<div class="dad">
  <img src="https://images.unsplash.com/photo-1519052537078-e6302a4968d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" alt="Cat image">
  <div class="overlay"></div>
</div>

CSS

div.dad {
  display: inline-block;
  position: relative;
}
div.overlay {
  background: rgba(0, 0, 0, 0.14);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}
img {
    display: block;
}