JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sign">
<div class="sign__inner">
?
</div>
</div>

SCSS

$figureSize: 100px;
$innerMargin: 10px;

@mixin size($width: 100%, $height: $width) {
  width: $width;
  height: $height;
}

@mixin semicircle($radius, $color: white) {
  @include size($radius * 2, $radius);
  box-sizing: border-box;
  display: block;
  border: 2px solid $color;
  border-radius: $radius $radius 0 0;
  border-bottom-width: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center bottom;
}

body {
  background: black;
  color: white;
  @include size();
}


.sign {
  margin: auto;
  font-size: $figureSize / 2;
  position: relative;
  @include size($figureSize);
  line-height: $figureSize;
  text-align: center;
  
  &:before, &:after {
    content: '';
    @include semicircle($figureSize/2, #D7742D);
  }
  &:before {
    transform: rotate(-90deg);
  }
  &:after {
    transform: rotate(170deg);
  }
  &__inner {
    $innerFigureSize: $figureSize - ($innerMargin * 2);
    position: absolute;
    top: $innerMargin;
    left: $innerMargin;
    @include size($innerFigureSize);
    line-height: $innerFigureSize;
  
    &:before, &:after {
      content: '';
      @include semicircle($innerFigureSize/2);
    }
    &:before {
      transform: rotate(180deg);
    }
    &:after {
      transform: rotate(40deg);
    }
  }
}