JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<div class="box">
<div class="blue_bx">

</div>
</div>

CSS

.box {
  width:300px;
}
.blue_bx {
  width: 100%;
  height: 50px;
  background: teal;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  position: relative;
}
.blue_bx::before,
.blue_bx::after{
  position: absolute;
  content: '';
  
}
.blue_bx::before {
    border-bottom: 8px solid transparent;
    border-left-width: 10px;
    border-left-style: solid;
    left: 0;
    bottom: -8px;
    border-left-color: teal;
   
}