JSFiddle - React, Tailwind, and code Playground

HTML

<div class="eins"></div>
 <div class="zwei"></div>

CSS

div {
  height:160px;
  width:225px;
  float: left;
  margin: 10px;
}


 .eins {
  background: red;
   -webkit-background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
   background: linear-gradient(rgba(0, 255, 0, 0.1), rgba(0, 0, 0, 1));
}
 .zwei {
  background: red;
   -webkit-background-image: linear-gradient(rgba(255, 255, 0, 0.1), rgba(255, 0, 255, 1));
   background-image: linear-gradient(rgba(255, 0, 255, 0.1), rgba(255, 0, 0, 1));
}