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

Import React, { useState } from 'react'; import Slider from 'react slick'; import { FaChevronLeft, FaChevronRight } from 'react icons/fa'; import { motion } from 'framer motion'; import "slick carousel/slick/slick.css"; import "slick carousel/slick/slick theme.css"; const bannerData = [ { id: 1, image: 'https://images.unsplash.com/photo 1549317661 bd32c8ce0db2?ixlib=rb 4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', alt: 'Luxury sedan for rent', slogan: 'HONDA CITY', description: 'We provide cab any time anywhere. Now you can book a cab in less than 30 minutes. Taxi Rental & Travels is the customer\'s most preferred choice.', cta: 'Book Now', }, // You can add more banners as needed ]; const BannerSlider = () => { const [hoveredSlide, setHoveredSlide] = useState(null); const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 5000, nextArrow: <SampleNextArrow />, prevArrow: <SamplePrevArrow />, }; return ( <div className="slider container"> <Slider {...settings}> {bannerData.map((banner, index) => ( <div key={banner.id} className="flex items center justify between w full h [500px] overflow hidden bg black" onMouseEnter={() => setHoveredSlide(index)} onMouseLeave={() => setHoveredSlide(null)} > {/* Left Side Text Content */} <div className="w 1/2 p 10 text left"> <h2 className="text 6xl font bold text white uppercase">{banner.slogan}</h2> <p className="text white mt 5">{banner.description}</p> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: hoveredSlide === index ? 1 : 0, y: hoveredSlide === index ? 0 : 20 }} transition={{ duration: 0.4 }} > <button className="bg yellow 500 text black px 6 py 2 mt 5 rounded full font semibold hover:bg yellow 400 transition all duration 300"> {banner.cta} </button> </motion.div> </div> {/* Right Side Image */} <div className="w 1/2 h full flex items center"> <img src={banner.image} alt={banner.alt} className="w full h full object contain" /> </div> </div> ))} </Slider> </div> ); }; // Custom Next Arrow Component const SampleNextArrow = ({ onClick }) => ( <div className="absolute right 6 top 1/2 transform translate y 1/2 bg white bg opacity 50 p 2 rounded full z 20 cursor pointer hover:bg opacity 75" onClick={onClick} > <FaChevronRight className="text 2xl text black" /> </div> ); // Custom Prev Arrow Component const SamplePrevArrow = ({ onClick }) => ( <div className="absolute left 6 top 1/2 transform translate y 1/2 bg white bg opacity 50 p 2 rounded full z 20 cursor pointer hover:bg opacity 75" onClick={onClick} > <FaChevronLeft className="text 2xl text black" /> </div> ); export default BannerSlider; improve this banner