JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="section">
  <div class="woman-spine">
    <div class="dot" data-scroll="1">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="2">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="3">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="4">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="5">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="6">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="7">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="8">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="9">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="10">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
  </div>
</div>

CSS

body{ height: 1200px; }
.section { padding: 150px 0; }
.woman-spine { position: absolute; top: 37%; left: 24%; width: 30%; }
.dot { position: relative; float: left; margin-right: 3%; width: 15px; height: 15px; }
.spine-dot { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #00aeef; }
.spine-dot-white { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #FFF; opacity: 0; }