JSFiddle - React, Tailwind, and code Playground

by Julien Roche

HTML

<div class="circle circle--left"></div>
<div class="circle circle--right"></div>

CSS

/*
See for conic gradient: https://css-tricks.com/snippets/css/css-conic-gradient/
*/

:root {
  --circle-size: 12.5em;
  --ro: calc(0.5 * var(--circle-size));
  --ri: calc(.52 * var(--ro));
  --mask: radial-gradient(transparent calc(var(--ri) - 0.5px), red var(--ri));
  --translate: 1.5em;
}

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

.circle {
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  border-radius: 50%;
  height: var(--circle-size);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  transform-style: preserve-3d;
  width: var(--circle-size);
}

.circle--left {
  transform: rotateX(1deg) translateX(var(--translate));
}

.circle--right {
  transform: rotateX(-1deg) translateX(calc(-1 * var(--translate)));
}