JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div class="multi_bgr_example"></div>

CSS

.multi_bgr_example {
  width: 100%;
  height: 500px;
  background-image: url(https://static.pexels.com/photos/128817/pexels-photo-128817-medium.jpeg), url(https://static.pexels.com/photos/129043/pexels-photo-129043-medium.jpeg), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left, right;
  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}