JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="top"></div>

  

<div class="main"></div>
</div>

CSS

body {
    margin:50px;
    min-width:400px;
    background:white;
}
.container{
  width: 300px;
}
.top{
  with: 100%;
  height: 0;
  border-bottom: 50px solid red;
  border-left: 300px solid transparent;
}
.main {
    background-color: red;
    width: 100%;
    height: 200px;
}