JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewbox="0 0 20 8" class="yellow">
  <path d="M0 0 Q 30 4 0 8" />
</svg>

<svg viewbox="0 0 20 8" class="orange">
  <path d="M0 0 Q 30 4 0 8" />
</svg>

<svg viewbox="0 0 20 8" class="red">
  <path d="M0 0 Q 30 4 0 8" />
</svg>

<svg viewbox="0 0 20 8" class="green">
  <path d="M0 0 Q 30 4 0 8" />
</svg>

<svg viewbox="0 0 20 8" class="blue">
  <path d="M0 0 Q 30 4 0 8" />
</svg>

CSS

svg{width:100px;}

.yellow { fill:#f1c40f }
.orange { fill:#e67e22 } 
.red { fill:#e74c3c }
.green { fill:#2ecc71 }
.blue { fill:#3498db }