JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div class="stepBtnPanel">
					<a id="stepBtn1" class="stepBtn">Step 1 - Search</a>
					<a id="stepBtn2" class="stepBtn">Step 2 - Profile</a>
					<a id="stepBtn3" class="stepBtn">Step 3 - Checkout</a>
					<a id="stepBtn4" class="stepBtn">Step 4 - Info</a>
					<a id="stepBtn5" class="stepBtn">Step 5 - Sent</a>
				</div>

CSS

.stepBtn {
  width: 100px;
  height: 25px;
  float: left;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background: #f1592a;
  border: 1px dashed #ea4324;
  border-radius: 1px;
  font-family: "Ubuntu Light";
  text-decoration: none;
  padding-top: 5px;
  box-sizing: border-box;
  margin: 45px 5px 0px 5px;

JavaScript

$(document).ready(function() {

                // Adding Maxlength to Cel Input
                $('input#cel').attr('maxLength','8');
                // END
                
                //Set Default State of each portfolio piece
                $(".paging").show();
                $(".paging a:first").addClass("active");

                //Get size of images, how many there are, then determin the size of the image reel.
                var imageWidth = $(".window").width();
                var imageSum = $(".image_reel img").size();
                var imageReelWidth = imageWidth * imageSum;

                //Adjust the image reel to its new size
                $(".image_reel").css({'width' : imageReelWidth});

                //Paging + Slider Function
                rotate = function(){
                    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
                    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

                    $(".paging a").removeClass('active'); //Remove all active class
                    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

                    //Slider Animation
                    $(".image_reel").animate({
                        left: -image_reelPosition
                    }, 500 );

                };

                //Rotation + Timing Event
                rotateSwitch = function(){
                    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
                        $active = $('.paging a.active').next();
                        if ( $active.length === 0) { //If paging reaches the end...
                            $active = $('.paging a:first'); //go back to first
                        }
                        rotate(); //Trigger the paging and slider function
                    }, 7000); //Timer speed in...