JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<div class="container">
  <div class="list">
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
    <div class="list-item"></div>
  </div>
</div>
<button class="prev" value="prev">prev</button>
<button class="next" value="next">next</button>

CSS

.container {
  width: 300px;
  height: 60px;
  background: rgba(0, 0, 0, 1);
}
.list {
  width: 100%;
  height: 100%;
  flex: 1;
  transition: 250ms all ease-in;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overflow-x: auto;
}
.list-item {
  display: flex;
  flex-shrink: 0;
  transition: 250ms all ease-in;
  width: 12px;
  margin-right: 8px;
  position: relative;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.list-item.correct {
  background: #009688;
  animation: 500ms growIn;
}

.list-item.correct::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  animation: 500ms glow;
  border: 1px solid #009688;
}

@keyframes growIn{
    0% {
      transform: scale(1.6, 1.6);
    }
    100% {
      transform: scale(1, 1);
    }
}

@keyframes glow{
    0% {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(2, 2);
    }
}

JavaScript

const next = document.getElementsByClassName('next')[0];
const prev = document.getElementsByClassName('prev')[0];

next.addEventListener('click', handleNextClick, false);
prev.addEventListener('click', handlePrevClick, false);

let items = document.getElementsByClassName('list-item');
items = Array.prototype.slice.call(items);
const container = document.getElementsByClassName('list')[0];

function handleNextClick(event) {
	container.style.transform = 'translateX(-20px)';
}

function handlePrevClick(event) {
	
}