JSFiddle - React, Tailwind, and code Playground

by Adil Heybətov

HTML

<ul></ul>

CSS

li {
  width: 20px;
  height: 20px;
  background-color: lightgrey;
  text-decoration: none;
  display: inline-block;
  border-radius: 100%;
  margin-right: 15px;
}

.active {
  background-color: grey;
}

JavaScript

var ul = document.querySelector('ul');
var dots = [];

for (var i = 0; i < 5; i++) {
  var dot = document.createElement('li');
  lis.push(li);
  ul.appendChild(dot);
}