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

import React, { useState, useEffect } from "react"; import { FaChevronLeft, FaChevronRight } from "react-icons/fa"; const ImageSlider = () => { const images = [ { url: "https://media.istockphoto.com/id/1449490038/photo/online-shopping-and-e-commerce-technology-concept-shopper-using-computer-laptop-to-input.jpg?s=2048x2048&w=is&k=20&c=3Pmwqsxiy2XTePmajfBQyz2KcnC27QtzaFxNmBD9al0=", alt: "Online shopping", }, { url: "https://cdn.pixabay.com/photo/2021/12/27/19/28/e-commerce-6898102_1280.png", alt: "E-commerce illustration", }, { url: "https://cdn.pixabay.com/photo/2023/09/19/01/29/ai-generated-8261668_1280.jpg", alt: "AI generated image", }, { url: "https://cdn.pixabay.com/photo/2018/08/29/17/07/ecommerce-3640321_1280.jpg", alt: "E-commerce store", }, { url: "https://cdn.pixabay.com/photo/2018/05/16/18/08/e-commerce-3406613_1280.jpg", alt: "Shopping cart", }, { url: "https://cdn.pixabay.com/photo/2020/05/25/05/48/shopping-5217035_960_720.png", alt: "Shopping scene", }, ]; const [currentIndex, setCurrentIndex] = useState(0); const goToPrevious = () => { setCurrentIndex((prevIndex) => prevIndex === 0 ? images.length - 1 : prevIndex - 1 ); }; const goToNext = () => { setCurrentIndex((prevIndex) => prevIndex === images.length - 1 ? 0 : prevIndex + 1 ); }; useEffect(() => { const timer = setTimeout(goToNext, 5000); return () => clearTimeout(timer); }, [currentIndex]); return ( <div className="relative w-full h-[300px] overflow-hidden"> <div className="w-full h-full flex transition-transform duration-500 ease-out" style={{ transform: `translateX(-${currentIndex * 100}%)` }} > {images.map((image, index) => ( <img key={index} src={image.url} alt={image.alt} className="w-full h-full object-cover" /> ))} </div> <button onClick={goToPrevious} className="absolute top-1/2 left-4 -translate-y-1/2 bg-white bg-opacity-50 p-2 rounded-full" aria-label="Previous Slide" > <FaChevronLeft /> </button> <button onClick={goToNext} className="absolute top-1/2 right-4 -translate-y-1/2 bg-white bg-opacity-50 p-2 rounded-full" aria-label="Next Slide" > <FaChevronRight /> </button> <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2"> {images.map((_, index) => ( <div key={index} className={`w-3 h-3 rounded-full ${ currentIndex === index ? "bg-white" : "bg-gray-300" }`} ></div> ))} </div> </div> ); }; export default ImageSlider; make the slider more aesthetic