JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Items on a Circle</title>
  <link rel="stylesheet" href="stylesheets/circle.css" />
</head>
<body>
    <h3><a href="http://j5bot.blogspot.com/2012/10/compass-sass-for-placing-elements-on.html">Compass / SASS for Placing Elements</a></h3>
  <div class="ring-container">
    <div class="ring">
      <div class="ring-positions">
        <div class="ring-position ring-position-1"></div>
        <div class="ring-position ring-position-2"></div>
        <div class="ring-position ring-position-3"></div>
        <div class="ring-position ring-position-4"></div>
        <div class="ring-position ring-position-5"></div>
        <div class="ring-position ring-position-6"></div>
        <div class="ring-position ring-position-7"></div>
        <div class="ring-position ring-position-8"></div>
        <div class="ring-position ring-position-9"></div>
        <div class="ring-position ring-position-10"></div>
        <div class="ring-position ring-position-11"></div>
        <div class="ring-position ring-position-12"></div>
        <div class="ring-position ring-position-13"></div>
      </div>
    </div>
  </div>
</body>
</html>

SCSS

body { margin: 50px; }
h3 { margin-bottom: 10px; }

.ring-container { border: solid 1px black; display: inline-block; }

.ring { position: relative; box-sizing: border-box; width: 180px; height: 180px; margin: 14px; border: solid 1px black; -webkit-border-radius: 180px; -moz-border-radius: 180px; -ms-border-radius: 180px; -o-border-radius: 180px; border-radius: 180px; }

.ring-positions { position: relative; width: 180px; height: 180px; top: -14px; left: -14px; }

.ring-position { position: absolute; width: 28px; height: 28px; -webkit-border-radius: 28px; -moz-border-radius: 28px; -ms-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; box-sizing: border-box; border-color: black; border-style: solid; }

.ring-position-1 { top: 0px; left: 90px; border-width: 3.5px; }

.ring-position-2 { top: 10.30896px; left: 131.82509px; border-width: 4px; }

.ring-position-3 { top: 38.87417px; left: 164.06855px; border-width: 4.5px; }

.ring-position-4 { top: 79.1517px; left: 179.3438px; border-width: 5px; }

.ring-position-5 { top: 121.91444px; left: 174.15146px; border-width: 5.5px; }

.ring-position-6 { top: 157.36597px; left: 149.68104px; border-width: 6px; }

.ring-position-7 { top: 177.38476px; left: 111.53841px; border-width: 6.5px; }

.ring-position-8 { top: 177.38476px; left: 68.46159px; border-width: 7px; }

.ring-position-9 { top: 157.36597px; left: 30.31896px; border-width: 7.5px; }

.ring-position-10 { top: 121.91444px; left: 5.84854px; border-width: 8px; }

.ring-position-11 { top: 79.1517px; left: 0.6562px; border-width: 8.5px; }

.ring-position-12 { top: 38.87417px; left: 15.93145px; border-width: 9px; }

.ring-position-13 { top: 10.30896px; left: 48.17491px; border-width: 9.5px; }