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

Generate a slider with 4 checkpoint , label them as Pending , Started , Running , Completed . once user slides the slider to a checkpoint , it shall not allow to go back . data will be stored in state and exported as prop. use suitable color also for each checkpoint and as the slider bar increases , use gradient color effect for it. Also note that , slider moves along with drag and smooth transition.