JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="carousel-indicators">
    <li></li>
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

.carousel-indicators {
  position: absolute;
  bottom: 5px;
  left: 50%;
  z-index: 15;
  width: 100px;
  margin: 0 0 0 -50px;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 2px;
  margin-right: 2px;
  text-indent: -999px;
  border: 1px solid #333;
  background-color: #333;
  border-radius: 5px;
  cursor: pointer;
}
.carousel-indicators .active {
  background-color: white;
}