Component 0 - Copy this React, Tailwind Component to your project

I want to create a vertical progress bar that includes 6 milestones. As the user scrolls down the page, the progress bar should animate downward, progressing toward the next milestone. When a milestone is reached, an image and text should appear with animation. For odd numbered milestones (1, 3, 5), the image and text should slide in from the left. For even numbered milestones (2, 4, 6), they should slide in from the right. Appearing to come out from behind the progress bar , the image and text for each milestone should fade in smoothly and scale up from a smaller size, creating a zoom in effect. These animations should only trigger when the corresponding milestone comes into the viewport during scrolling.