Skills Timeline - Copy this React, Tailwind Component to your project

Necesito que a este timeline: <div> <h2 className="text 3xl font bold text white text center mb 12">Skills & Technologies</h2> <motion.div className="relative" variants={containerVariants} initial="hidden" animate="visible" > <div className="absolute left 8 top 8 bottom 0 mb 28 w 0.5 bg gray 600" /> {skills.map((skill) => ( <motion.div key={skill.id} className="relative mb 8" variants={skillVariants} whileHover={{ scale: 1.02 }} > <div className="flex items start"> <div className="flex items center justify center w 16 h 16 bg [#202020] rounded full border 4 border gray 600 z 10"> {skill.icon} </div> <div className="ml 6 bg white/10 p 6 rounded lg shadow xl flex 1 hover:bg [#191919] transition colors duration 200"> <h3 className="text xl font bold text white mb 4">{skill.category}</h3> <div className="flex flex wrap gap 2"> {skill.items.map((item, index) => ( <span key={index} className="px 3 py 1 bg white/10 text gray 300 rounded full text sm" > {item} </span> ))} </div> </div> </div> </motion.div> ))} </motion.div> </div>