JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<h2>Live demo:</h2>

<div class="demo">
  <div class="just-color">
  </div>

  <div class="normal-image">
  </div>

  <div class="bg-blend">
  </div>
</div>

<h2>Should look like:</h2>

<img class="screencap" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blend-example-1.png">

CSS

.bg-blend {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

.normal-image {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/building.jpg);
}

.just-color {
  background: red;
}

body {
  padding: 20px;
}
.demo > div {
  float: left;
  width: 200px;
  height: 200px;
  background-size: cover;
}
.demo {
  width: 600px;
  overflow: hidden;
}
.screencap {
  width: 600px;
}