JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigator">
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
</div>

CSS

body {
  background-color: #222;
}

.navigator {
    position: absolute;
    bottom: 20px;
}

.page {
    border: 1px solid #3cbeff;
    box-sizing: border-box;
    display: inline-block;
    height: 15px;
    margin: 5px;
    width: 15px;
    padding: 2px;
}

.page > div {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.page > div.active {
    animation-name: active;
    animation-direction: alternate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    height: 100%;
    opacity: 1;
}

@keyframes active {
    from {
        background-color: #3cbeff;
    }
    to {
        background-color: white;
    }
}