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

import React, { useState } from 'react'; import { ArrowLeft, ArrowRight } from 'lucide-react'; const CarouselComponent = () => { const [currentSlide, setCurrentSlide] = useState(0); // Added custom images const slidesData = [ 'https://images.unsplash.com/photo-1547721064-da6cfb341d50', 'https://images.unsplash.com/photo-1564135624576-c5c88640f235', 'https://images.unsplash.com/photo-1526772662000-3f88f10405ff', ]; const previousSlide = () => { setCurrentSlide((prev) => (prev - 1 + slidesData.length) % slidesData.length); }; const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % slidesData.length); }; return ( <div className="flex justify-center items-center h-screen"> <div className="relative max-w-4xl mx-auto"> <div className="absolute inset-0 bg-gray-200 flex justify-between items-center z-10"> <button onClick={previousSlide} className="p-4 hover:bg-gray-300 transition-colors"> <ArrowLeft className="w-6 h-6 text-gray-800" /> </button> <button onClick={nextSlide} className="p-4 hover:bg-gray-300 transition-colors"> <ArrowRight className="w-6 h-6 text-gray-800" /> </button> </div> <div className="overflow-hidden"> <img src={slidesData[currentSlide]} alt={`Slide ${currentSlide}`} className="block w-full transition-transform ease-in-out duration-700" /> </div> </div> </div> ); }; export default CarouselComponent; add header in this code