JSFiddle - React, Tailwind, and code Playground

HTML

<div><div></div><div></div><span></span></div>

CSS

div {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  transform-origin: top left;
  position: relative;
  transform: scale(9);
}
div div {
  border: 2px solid;
  border-radius: 9px;
  position: absolute;
  border-color: transparent #4285f4 transparent transparent;
  transform: rotate(33.4630409671deg); /* 45 - arcSin(1/5) */
  transform-origin: center;
}
div div + div {
  border-color: #ea4335 transparent #34a853 #fbbc05;
  transform: none;
}
div span {
  display: block;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 5px;
  right: .10102051443px; /* 5 - sqrt(5^2 - 1^2) */
  background: #4285f4;
}