JSFiddle - React, Tailwind, and code Playground

HTML

<div class='top'>
  TOP
</div>

<div class='bottom'>
  BOTTOM
</div>

CSS

.top{
  height: 40px;
  width: 100%;
  background: linear-gradient(78deg, red 50%, transparent 1%); 
}


.bottom{
  height: 40px;
  width: 100%;
  background: linear-gradient(78deg, green 52%, transparent 1%); 
}