Product Card - Copy this React, Tailwind Component to your project
Import React, { useState, useEffect } from 'react'; const CardSection = () => { const [activeIndex, setActiveIndex] = useState(1); // Start with the middle card active const cards = [ { title: 'Flexible Difficulty', content: 'We have sophistically designed machines for all beginner to advance level players.', levels: ['CoreGuard', 'Webfort', 'Tailwind'], }, { title: 'Flexible Difficulty', content: 'We have sophistically designed machines for all beginner to advance level players.', levels: ['CoreGuard', 'Webfort', 'Tailwind'], }, { title: 'Flexible Difficulty', content: 'We have sophistically designed machines for all beginner to advance level players.', levels: ['CoreGuard', 'Webfort', 'Tailwind'], }, ]; // Handle automatic carousel rotation every 3 seconds useEffect(() => { const interval = setInterval(() => { setActiveIndex((prevIndex) => (prevIndex === cards.length 1 ? 0 : prevIndex + 1)); }, 3000); // Change card every 3 seconds return () => clearInterval(interval); // Clear interval on component unmount }, [cards.length]); const handlePrev = () => { setActiveIndex((prev) => (prev === 0 ? cards.length 1 : prev 1)); }; const handleNext = () => { setActiveIndex((prev) => (prev === cards.length 1 ? 0 : prev + 1)); }; return ( <div className="relative flex h [500px] items center justify center"> {/* Navigation Arrows */} <button onClick={handlePrev} className="absolute left 0 rounded full bg purple 500 p 2 text 4xl text white"> ‹ </button> <button onClick={handleNext} className="absolute right 0 rounded full bg purple 500 p 2 text 4xl text white"> › </button> <div className="flex items center justify center space x 6"> {cards.map((card, index) => ( <div key={index} className={`transform transition all duration 500 ease in out ${ index === activeIndex ? 'z 20 scale 110 border purple 500 bg [#111] shadow lg shadow purple 500/40' : 'z 10 scale 90 border [#E4E4E4] bg [#030303] opacity 50' } h [404px] w [364px] rounded [42px] border p 6 text center text white`} style={{ transformOrigin: 'center' }} > <h2 className="mb 4 text xl font semibold">{card.title}</h2> <p className="mb 6 text gray 400">{card.content}</p> {/* Card options */} <div className="space y 3"> {card.levels.map((level, i) => ( <div key={i} className="flex items center justify between"> <span className={i === 1 ? 'text purple 500' : 'text gray 400'}>{level}</span> <span className="text gray 500"> {i === 0 ? 'Beginners' : i === 1 ? 'Intermediates' : 'Advanced'} </span> {i === 1 && <div className="h 3 w 3 rounded full bg purple 500"></div>} </div> ))} </div> </div> ))} </div> </div> ); }; export default CardSection; modify this code . in to the cart should only pop out effect while its in center.
