JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div style="background-image: url(https://www.imarc.com/writable/images/Homepage-Featured-Work/_1720x965_crop_center-center_none/bh-homepage-feature.jpg);">
  hello
  <span>lorem ipsum</span>
</div>

SCSS

%test {
/*   background: gold; */
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.425) 25%, transparent);

  height: 300px;
  &::before {
    content: 'MAR';
    display: block;
  }
  span {
    color: red;
   }
 }

div {
  @extend %test;
}