JSFiddle - React, Tailwind, and code Playground

HTML

<div id="steps">
    <a href="#1" data-ref="dynamic-tabs slider-id">
        <div class="step step-1 active">
                   <div class="step-title">Schedule Online or Wave Down a Biker</div>
            
         </div>
      </a>

     <a href="#2" data-ref="dynamic-tabs slider-id">
         <div class="step step-2">
             
             <div class="step-title">We Bike to & Clean Your Car</div>
            
         </div>
     </a>

     <a href="#3" data-ref="dynamic-tabs slider-id">
         <div class="step step-3">
            
             <div class="step-title">Come Back to a Clean Car</div>
            
         </div>
     </a>
 </div>
<div class="nav-right">
    <a href="#">right »</a>
</div>

CSS

.nav-right{margin-top:20px;font-weight:bold;}

JavaScript

$(document).ready(function(){


var rotatedElements = $(".step");
$(".nav-right a").click(function() {
    var cur = rotatedElements.filter(".active");
    cur.removeClass("active");
    var index = rotatedElements.index(cur) + 1;
    if (index >= rotatedElements.length)
        index = 0;
    rotatedElements.eq(index).addClass("active");
});
    
    
    
});