JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<div class="ten-x-logo">
  <div class="dot dot-1 dot-blue"></div>
  <div class="dot dot-2 dot-blue"></div>
  <div class="dot dot-3 dot-blue"></div>
  <div class="dot dot-4 dot-blue"></div>
  <div class="dot dot-5 dot-blue"></div>
  <div class="dot dot-6 dot-blue"></div>
  <div class="dot dot-7 dot-green"></div>
  <div class="dot dot-8 dot-green"></div>
  <div class="dot dot-9 dot-green"></div>
  <div class="dot dot-10 dot-yellow"></div>
</div>

CSS

.ten-x-logo {
  position: relative;
  border: 1px solid black;
  width: 160px;
  height: 90px;
}

.dot {
  position: absolute;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 20px;
  height: 20px;
}

.dot-blue {
  background-color: #3893d0;
}
.dot-green {
  background-color: #68bd45;
}
.dot-yellow {
  background-color: #fbe608;
}

.dot-1 {
  top: 50%;
  margin-top: -10px;
  right: 0;
}

.dot-2 {
  top: 50%;
  margin-top: -10px;
  right: 28px;
}

.dot-3 {
  top: 8px;
  right: 28px;
}

.dot-4 {
  bottom: 8px;
  right: 28px;
}

.dot-5 {
  top: 8px;
  right: 56px;
}

.dot-6 {
  bottom: 8px;
  right: 56px;
}

.dot-7 {
  top: 8px;
  right: 84px;
}

.dot-8 {
  bottom: 8px;
  right: 84px;
}

.dot-9 {
  top: 50%;
  margin-top: -10px;
  right: 84px;
}

.dot-10 {
  top: 50%;
  margin-top: -10px;
  right: 112px;
}