JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="img"></div>

CSS

.img {
  position:relative;
  height:400px;
  background: url("https://i.pinimg.com/originals/d2/91/28/d291286be03d19513f4f43ca12a7284c.jpg");
  background-size: cover;
}
.img::after {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  background: linear-gradient(135deg, red,30%, transparent);
}