Team Member - Copy this React, Tailwind Component to your project

Improve this"use client"; import React, { useEffect, useState } from 'react'; import teamMembers from '../data/teamdetails'; function Team() { const [currentFrontIndex, setCurrentFrontIndex] = useState(0); useEffect(() => { const interval = setInterval(() => { setCurrentFrontIndex((prevIndex: number) => (prevIndex + 1) % teamMembers.length); }, 3000); return () => clearInterval(interval); }, []); return ( <section className="mb 12"> <h3 className="text 2xl font bold text center mb 8 text blue 600">Meet Our Team</h3> {/* For larger screens */} <div className="hidden md:flex justify center items center relative h 72"> {teamMembers.map((member, index) => { const positionClass = (index === currentFrontIndex) ? 'z 10 scale 100' : 'z 0 scale 75'; const visibilityClass = (index === currentFrontIndex) ? 'opacity 100' : 'opacity 50'; const rotationClass = (index < currentFrontIndex) ? ' translate x 8' : 'translate x 8'; return ( <div key={index} className={`absolute transition all duration 1000 ease in out ${positionClass} ${visibilityClass} ${rotationClass} w 64 h 72 bg white rounded lg shadow md overflow hidden`} > <img src={member.image} alt={member.name} className="w full h 48 object cover" /> <div className="p 4"> <h4 className="text xl font semibold mb 2 text black">{member.name}</h4> <p className="text gray 600 mb 2">{member.role}</p> <p className="text sm text black">{member.bio}</p> </div> </div> ); })} </div> {/* Mobile View */} <div className="md:hidden grid grid cols 1 gap 8"> {teamMembers.map((member, index) => ( <div key={index} className="bg white rounded lg shadow md overflow hidden"> <img src={member.image} alt={member.name} className="w full h 48 object cover" /> <div className="p 4"> <h4 className="text xl font semibold mb 2 text black">{member.name}</h4> <p className="text gray 600 mb 2">{member.role}</p> <p className="text sm text black">{member.bio}</p> </div> </div> ))} </div> </section> ); } export default Team;