JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="hero">
  whatever
</div>

SCSS

html,body { 
  background-color: gold;
  margin: 0;
}
.hero {
  min-height: 50vh;
  position: relative;
  background: url(https://placeimg.com/640/480/any) 100%/cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent);
}