JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="step-btn">
step-btn
</div>
<div class="pagination-block">
  <div class="pagination-item active">1</div>
  <div class="pagination-item">2</div>
  <div class="pagination-item">3</div>
  <div class="pagination-item">4</div>
  
  <div class="pagination-line"></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #333;
}

.pagination-block {
  position: relative;
  margin: 1.5rem 0;
  
  display: flex;
  
  background: rgba(255, 255, 255, 0.3);
}

.pagination-item {
  position: relative;
  z-index: 2;
  width: 25%;
  height: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
  
  border: 1px solid rgba(255, 255, 255, 0.5);
  
  color: #fff;
  transition: 0.5s ease;
}

.pagination-item.active {
  color: #000;
}

.pagination-line {
  width: 25%;
  background-color: #fff;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: 0.5s ease;
}

JavaScript

$(document).ready(function($) {
	var currentStep = 0;
	var $btnNext = $('.step-btn');
  var $paginationItem = $('.pagination-item');
  var $paginationLine = $('.pagination-line');
  var widthLine = 25;
  
  $btnNext.not('.submit-btn').on('click', function(e) {
  	currentStep++;
    
    $paginationItem.eq(currentStep).addClass('active');
    $paginationLine.css({'width': widthLine * (currentStep + 1) + '%'})
  });
});