JSFiddle - React, Tailwind, and code Playground

by Luckypouet

HTML

<div class="title">
<svg class="curved" viewBox="0 0 360 100">
  <path id="curve" d="M22.2,96c0,0,59.6-41.4,157.3-41.4S336.7,96,336.7,96" fill="transparent"></path>
  <text>
    <textPath xlink:href="#curve" startOffset="50%" text-anchor="middle">
      PASTA<tspan>CADEMY</tspan>
    </textPath>
  </text>
  </svg>
</div>

SCSS

@font-face {
  font-family: "Trincha";
  src: url("https://cdn.monoprix.fr/sis/img/barilla-2022/trincha-regular.woff") format("woff");
  font-weight: 100;
}

.title {
  background: teal;
  z-index: 0;
  position: relative;
  overflow: hidden;
  margin: 0 -16px;
  &:before {
    content: "";
    display: block;
    padding: 25% 0 0;
  }
}
.curved {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  fill: #c31e36;
  text-align: center;
  textPath {
    font: 400 50px/1em "Trincha";
  }
  tspan {
    font: inherit;
    fill: #fff;
  }
}