JSFiddle - React, Tailwind, and code Playground

by terby

HTML

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

CSS

div {
  font-size: 24px;
  height: 192px;
  line-height: 192px;
  text-align: center;
  width: 192px;
  
	/* border-style: dotted; */
	border-style: double;
  border-radius: 100%;
  border-width: 14px;
  
  /* border-bottom-color: blue; */
	border-bottom-color: red;
  border-left-color: blue;
  border-right-color: transparent;
  border-top-color: red;
  
  transform: rotateZ(45deg);
}

span {
  display: block;
  transform: rotateZ(-45deg);
}