JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="js">JS</div>
    <div class="line1"></div>
    <div class="round1"></div>
    <div class="line2"></div>
    <div class="round2"></div>
    <div class="line3"></div>
    <div class="round3"></div>
  </div>

CSS

.main{
  width:100%;
  height:400px;
  background:#ddd;
}

.js{
  width:110px;
  height:110px;
  background:red;
  border-radius: 50%;
  float:right;
  margin:30px;
  color:#000;
  text-align:center;
  font-size:44px;
  line-height:110px;
}

.line1{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(-230deg);
  float:right;
  margin:120px -55px 0 0;
}

.line2{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(330deg);
  float:right;
  margin:188px -30px 0 0;
}

.line3{
  width:110px;
  height:4px;
  background:red;
  -webkit-transform:rotate(-330deg);
  float:right;
  margin:244px -110px 0 0;
}

.round1{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:160px -25px 0 0;
}

.round2{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:210px -25px 0 0;
}

.round3{
  width:20px;
  height:20px;
  border-radius:50%;
  background:red;
  float:right;
  margin:260px -105px 0 0;
}