JSFiddle - React, Tailwind, and code Playground

by Preeti Singh

HTML

<div class="dots">
  <div class="dot"></div>
</div>

CSS

html, body {
  height: 100%;
  background: black;
}

.dots {
  position: absolute;
  right: 20px;
}

.dot,
.dot:before,
.dot:after {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 20px;
  background-color: #fff;
  transform: rotate(270deg);
  cursor: pointer;
}

.dot {
  top: 50px;
  right: 0;
}

.dot:before,
.dot:after {
  content: "";
}

.dot:before {
  right: 10px;
  transition: right .3s ease-out;
}

.dot:after {
  left: 10px;
  transition: left .3s ease-out;
}

.dots:hover .dot:before {
  right: -10px;
}

.dots:hover .dot:after {
  left: -10px;
}