JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div>
  <h1>I am wonderful</h1>
  raw text
</div>

SCSS

@mixin screen($img, $background: #333, $alpha: 0.6) {
    position: relative;
    background-color: rgba($background, $alpha);
    
    &::before {
        background: url($img) no-repeat center/cover;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }
}

div {
  @include screen("http://imarc.github.io/boilerplate/img/hero.jpg", purple);  
  color: #FFF;
  padding: 2rem;
}