JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<div class="hoeba">Hello world!</div>
<div class="overlay"></div>

SCSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding:0;
}

.hoeba {
  position:absolute;
}

.overlay {
  border: 1px solid red;
  position: relative;
  width: 100%;
  height: 100%;

  
  &:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to top,red,green);
	opacity: .6; 
  }
}