JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">

</div>

CSS

.test{
  width:200px;
  height:200px;
  background:red;
  position:relative;
}
.test:after{
  position:absolute;
  content:"";
  background:linear-gradient(to right, blue 50%, yellow 50%);
  height:50%;
  width:100%;
  bottom:0;
}