JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="gradient-border-mask">

</div>

CSS

.gradient-border-mask {
  position: relative;
  padding: 15px 20px;
}

.gradient-border-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 300px 0;
  border-bottom: 20px solid transparent;
  background: linear-gradient(to left,#F31D7D,#480413) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

@media only screen and (max-width: 600px) {
.gradient-border-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 0 110px 0;
  border-bottom: 20px solid transparent;
  background: linear-gradient(to left,#F31D7D,#480413) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
}