JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div class="circle-fail">
  <!-- <div class="success"></div> -->

<div class="fail-first"></div>
<div class="fail-second"></div>
</div>

<div class="circle">
  <div class="success"></div>
  </div>

CSS

.circle {
  position: relative;
  width: 95px;
  height: 95px;

  border-radius: 50%;
  background: linear-gradient(318.55deg, #3372F1 9.26%, #5C8BFA 91.41%);
  box-shadow: 0px 12.1304px 15.163px rgba(89, 137, 250, 0.17);
  transform: rotate(90deg);
}

.success {
  position: absolute;
  width: 23.08px;
  height: 40.76px;
  top: 50%;
  left: 50%;

  border: 8.08696px solid #FFFFFF;
  border-left: none;
  border-top: none;

  box-sizing: border-box;
  /* transform: rotate(42.63deg); */
  transform: translate(-70%, -60%) rotate(-42.63deg);
}

.circle-fail {
  position: relative;
  width: 95px;
  height: 95px;

  background: linear-gradient(135.28deg, #FB563E 6.59%, #EF3B21 93.21%);
  box-shadow: 0px 12.1304px 15.163px rgba(246, 73, 48, 0.17);
  transform: rotate(90deg);
  border-radius: 50%;

}

.fail-first {
  position: absolute;
  width: 47px;
  height: 0px;
  left: 50%;
  top: 50%;
  border-radius: 10px;
  border: 4px solid #FFFFFF;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.fail-second {
  position: absolute;
  width: 47px;
  height: 0px;
  left: 50%;
  top: 50%;

  /* white */
  border: 4px solid #FFFFFF;
  border-radius: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
}