JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

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

SCSS

$border-width: 10px;

.circle {
  position: relative;
  width: 150px;
  height: 150px;
  border-color: #FFBC9C;
/* B29EFE */
/* 6ECFA1 */
  border-width: 0 0 0 $border-width;
  
  &,
  &:before,
  &:after {
    border-style: solid;
    border-radius: 50%;
    box-sizing: border-box;
  }
  
  &:before,
  &:after {
    display: none;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}