JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div class="overlay"></div>

SCSS

.overlay {
  background-image:url('http://placekitten.com/1250/300') ;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 80% 50%;
  width: 100%;
  height: 300px;
  position: relative;
  
  @media (max-width: 600px) {
    background-position: 50%;
  }  

}

.overlay:before {
  content: '';
  display: block;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 0% rgba(0,0,0,0) 50%, rgba(234, 33, 45, .75) 50%, rgba(234, 33, 45, .75) 100%);
  @media (max-width: 600px) {
    background-image: linear-gradient(to right, rgba(234, 33, 45, .75) 0%, rgba(234, 33, 45, .75) 100%);
  }
  width: 100%;
  height: 100%;
  position: absolute;
}
  
@supports (mix-blend-mode: multiply) {
  .overlay:before {
    background-image: linear-gradient(to right, rgba(0,0,0,0) 0% rgba(0,0,0,0) 50%, rgba(234, 33, 45, 1) 50%, rgba(234, 33, 45, 1) 100%);
    @media (max-width: 600px) {
      background-image: linear-gradient(to right, rgba(234, 33, 45, 1) 0%, rgba(234, 33, 45, 1) 100%);
    }
    mix-blend-mode: multiply;
  }
}