JSFiddle - React, Tailwind, and code Playground

by grettynebraska

HTML

<body>
    <div class="wrapper">
      <div class="pink"></div>
      <div class="green"></div>
    </div>
 </body>

CSS

.wrapper {
	background-color: blue;
	height: 100vh;
	width: 100%;
  isolation: isolate;
}

.pink {
	background: hotpink;
	height: 80%;
	width: 50%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 10%;
	mix-blend-mode: multiply;
}

.green {
	background: limegreen;
	height: 80%;
	width: 50%;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 10%;
	mix-blend-mode: multiply;
}