JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lid">
	<div class="label">
		<div class="text text-top">
			<span style="transform: rotate(-57deg)">c</span>
			<span style="transform: rotate(-46.5deg)">s</span>
			<span style="transform: rotate(-36deg)">s</span>
			<span style="transform: rotate(-15.6deg)">g</span>
			<span style="transform: rotate(-3deg)">o</span>
			<span style="transform: rotate(10deg)">d</span>
			<span style="transform: rotate(24deg)">d</span>
			<span style="transform: rotate(36.5deg)">e</span>
			<span style="transform: rotate(47deg)">s</span>
			<span style="transform: rotate(57.5deg)">s</span>
		</div>
		<div class="text text-bottom">
			<span style="transform: rotate(46.5deg)">b</span>
			<span style="transform: rotate(34.5deg)">a</span>
			<span style="transform: rotate(23.3deg)">t</span>
			<span style="transform: rotate(13.5deg)">h</span>
			<span style="transform: rotate(-5.8deg)">w</span>
			<span style="transform: rotate(-19.5deg)">a</span>
			<span style="transform: rotate(-30deg)">t</span>
			<span style="transform: rotate(-38deg)">e</span>
			<span style="transform: rotate(-47deg)">r</span>
		</div>
	</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

.lid {
  font-family: 'Titan One', cursive;
  display: inline-block;
  width: 20em;
  height: 20em;
  border-radius: 100%;
  position: relative;
  border: 1em solid #e9b2cd;
  box-shadow: inset 0 0 0 1em white;
  background-image: url('https://avatars.devrant.com/v-37_c-1_b-6_g-f_9-2_1-9_16-16_3-12_8-4_7-4_5-1_12-9_17-2_6-27_10-9_2-105_22-1_11-15_18-1_19-1_4-1_20-14_21-4.png');
  background-repeat: no-repeat;
  background-position: 71% 15%;
  background-size: 350%;
}

.text {
  font-size: 2.5em;
  text-shadow: 0 0 10px #e9b2cd, 0 0 10px #e9b2cd, 0 0 10px #e9b2cd;
}

.text-top {
  position: absolute;
  top: 3%;
  left: 47%;
}

.text-bottom {
  position: absolute;
  top: 80%;
  left: 47%;
}

.text span {
  position: absolute;
  bottom: auto;
  left: 50%;
}

.text-top span {
  transform-origin: center 3.5em 0;
}

.text-bottom span {
  transform-origin: center -2.4em 0;
}