How to implement a sliding animation for icons in React with Tailwind CSS?

I’m new to React and trying to create a slide effect for ‘Upcoming Icons’ that are stacked at the bottom of the screen. As progress is made and a stage is completed, I want each icon to slide off the screen.

The fade effect and Tailwind CSS are working fine, but the sliding effect isn’t working. I’m used to working with separate CSS files, but this time I have to do it with Tailwind, and I’m not sure how to implement the sliding animation. Can someone help me with this?

here is my progress.jsx

import React from 'react';
import { IdCard, CreditCard, Activity, Info, CheckCircle } from 'lucide-react';

const ProgressBar = ({ step }) => {
  return (
    <div className="flex flex-col items-center relative h-screen py-24 overflow-hidden">
      {/* Title */}
      <h1 className="text-2xl font-bold mb-4 text-center text-purple-600">Your Cards</h1>

      {/* Dots */}
      <div className="flex justify-center space-x-1 mb-4">
        <div className="h-2 w-2 bg-purple-500 rounded-full"></div>
        <div className="h-2 w-2 bg-purple-500 rounded-full"></div>
        <div className="h-2 w-2 bg-purple-500 rounded-full"></div>
        <div className="h-2 w-2 bg-purple-500 rounded-full"></div>        <div className="h-2 w-2 bg-purple-500 rounded-full"></div>
        <div className="h-2 w-2 bg-purple-500 rounded-full"></div>
      </div>

      {/* Progress Bar */}
      <div className="relative h-[90%] w-12">
        <div className="relative w-1 h-full bg-gray-300">
          <div 
            className="absolute w-full bg-gradient-to-t from-red-500 to-fuchsia-600 transition-height ease-in-out duration-500" 
            style={{ height: `${(step / 5) * 100}%`, top: 0 }}  // Ensure gradient fills from top to bottom
          />
        </div>

        {/* Icons along the progress bar */}
        <div className="absolute top-0 flex flex-col items-center h-full space-y-0">
          {[IdCard, CreditCard, Activity, Info, CheckCircle].map((Icon, index) => {
            const isActive = step === index + 1;
            const isCompleted = step > index + 1;
            const isUpcoming = step < index + 1;

            const baseClasses = "flex justify-center items-center relative transition-all ease-in-out duration-500";
            
            // Adjust positions: top for the first icon, bottom stack for the rest
            const iconWrapperClasses = isActive
              ? "z-10 transform translate-y-0"  // Active icon moves to the top
              : isCompleted
              ? "opacity-0 transform -translate-y-full"
              : index === 0
              ? "translate-y-0"  // Keep the first icon at the top
              : "transform translate-y-full";  // Stack other icons at the bottom

            const circleClasses = isActive
              ? "w-12 h-12 border-2 border-purple-600 bg-gradient-to-r from-red-500 to-fuchsia-600"
              : "w-8 h-8 border-2 border-gray-400 bg-black";

            const iconClasses = isActive ? "w-6 h-6 text-white" : "w-4 h-4 text-gray-400";

            return (
              <div key={index} className={`${baseClasses} ${iconWrapperClasses}`}>
                <div className={`${circleClasses} rounded-full flex justify-center items-center`}>
                  <Icon className={iconClasses} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default ProgressBar;

I tried changing every line of my code but nothing worked