JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="test_text">The Site</div>

<div class="test_curve">
<svg viewBox="0 0 500 100">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text width="500">
<textPath xlink:href="#curve" startOffset="49%">Test Text Here</textPath>
</text>
</svg>
  
</div>

CSS

body {
  background-color: #333;
  font-family: Arial;
  font-size: 35px;
}

path {
  /* fill: transparent; */
}

text {
  fill: #FF9800;
  text-anchor: middle;
}

.test_text {
  width:100%;
  color: #FF9800;
  text-align:center;
  background-color:pink;
}

.test_curve {
  background-color:gray;
}