JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
  <div class="red"><span></span></div>
  <div class="blue"><span></span></div>
  <div class="yellow"><span></span></div>
</div>
<div class="size">
  <span>M</span>
  <span>L</span>
  <span>XL</span>
</div>

CSS

.circle, .size {
  display: flex;
}
.circle div {
  margin: 3px;
  padding: 2px;
  border-radius: 50%;
}
.circle span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.red {
  border: 1px solid red;
}
.red span {
  background: red;
}
.blue {
  border: 1px solid blue;
}
.blue span {
  background: blue;
}
.yellow {
  border: 1px solid yellow;
}
.yellow span {
  background: yellow;
}
.size span {
  display: block;
  min-width: 14px;
  margin: 3px;
  padding: 0 3px;
  text-align: center;
  border: 1px solid #000;
}