JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="titleCurva c1">
<span>c1 asdffasd</span>
</div>
<div class="titleCurva c2">
<span>c2</span>
</div>
<div class="titleCurva c3">
<span>c333</span>
</div>

CSS

.titleCurva{
 position:relative;
  width:60%;
  border-color: green;
  border-bottom:4px solid red;
  background: gray;
}

.titleCurva.c1{ border-color: red;}
.titleCurva.c2{ border-color: green; background: yellow;}
.titleCurva.c3{ border-color: blue;}

.titleCurva.c1 span::after{ border-color: red;}
.titleCurva.c2 span::after{ border-color: green;}
.titleCurva.c3 span::after{ border-color: blue;}


.titleCurva span::after{
  display:block;
  width:30px;
  height:10px;
  content: "";
  position:absolute;
  right:20px;
  top:5px;
  background: tan;
  border-bottom:4px solid transparent;
}