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

NECESTIO QUE ME GENERE UN PRONT, ES DECIR CON ESTO : <section className="py 16 bg gray 900"> <div className="container mx auto px 6"> <h3 className="text 3xl font bold mb 8 text center">Product Details</h3> <div className="flex flex col md:flex row items center justify between"> <div className="w full md:w 1/2 mb 8 md:mb 0"> <motion.img src={product.images[0]} alt={product.name} className="w full h auto rounded lg shadow lg" whileHover={{ scale: 1.05 }} /> </div> <div className="w full md:w 1/2 md:pl 8"> <h2 className="text 3xl font bold mb 4">{product.name}</h2> <p className="text 2xl font semibold mb 4">${product.price}</p> <p className="text gray 300 mb 6">{product.description}</p> <div className="flex items center mb 6"> <button className="bg gray 700 text white px 3 py 1 rounded l" onClick={() => handleQuantityChange( 1)} > </button> <span className="bg gray 800 text white px 4 py 1">{quantity}</span> <button className="bg gray 700 text white px 3 py 1 rounded r" onClick={() => handleQuantityChange(1)} > + </button> </div> <motion.button className="w full bg blue 500 text white py 3 rounded lg hover:bg blue 600 transition colors duration 300 mb 6" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} onClick={handleAddToCart} > Add to Cart </motion.button> <ul className="space y 4"> <li className="flex items center"> <FiTruck className="text blue 400 mr 2" size={24} /> <span>Free Shipping</span> </li> <li className="flex items center"> <FiRefreshCw className="text blue 400 mr 2" size={24} /> <span>30 Day Returns</span> </li> <li className="flex items center"> <FiCreditCard className="text blue 400 mr 2" size={24} /> <span>2 Year Warranty</span> </li> </ul> </div> </div> </div> </section> ME TENES QUE GENERAR UN SLIDER, PARA QUE PUEDA PASAR 3 IMAGENES, Y POR OTRO LADO, CUANDO PASO CURSOR POR LA IMAGEN , LA MISMA DEBE HACER ZOOM POR DONDE ESTOY PASANDO EL MOSUSE