JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <span class="s1"></span>
  <span class="s2"></span>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}
div{
  width: 100vw;
  height: 100vh;
  position:relative;
  background: #D3D3D3;
  
  
  }
.s1{
  display:block;
  width: 100%;
  height: 100%;
  position:absolute;
  top:0;
  right: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 50%, rgba(135,206,235,1) 50%);
z-index: 3; 
}

.s2{
  display:block;
  width: 100%;
  height: 100%;
  position:absolute;
  top:0;
  right: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 49%, rgba(0,0,0,1) 51%);
  z-index: 2;
}