JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
  <div class="circle-inner">
    <div class="triangle-3"></div>
    <div class="triangle-4"></div>
  </div>
</div>

CSS

.circle
{
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    background-color: black;
    position: relative;
}

.circle-inner {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.triangle-3
{
    height: 0px;
    width: 0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #70c282;
    display: inline-block;
}
.triangle-4
{
    height: 0px;
    width: 0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #70c282;
    display: inline-block;
}