JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="gauge">
  
</div>

CSS

.gauge {
  width: 243px;
  height: 143px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='248' height='143' viewBox='0 0 248 143' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 123C16 63.3533 64.3532 15 124 15C183.647 15 232 63.3533 232 123' stroke='%23ffffff' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background: #e5e5e5; 
}