const cardAdherent = () => { //Exemplary for rendering the years 2026 to 2030 const years = [2026, 2027, 2028, 2029, 2030]; Return ( <div className="flex flex-col items-center bg-gray-100p-8 rounded-lg shadow-lg” style= {{width: '3.5in', height: '2.1in', height: '2.1in'}} > {/ Front /} <div className="bg-white p-4 rounded-lg shadow-md w-full h-full"> <img src=" https://placehold.co/80x30 " alt="Logo de l'Association" className="mb-2" />{/ Logo placeholder /} <h2 className="text-xl font-bold text-center">MEMBERSHIP CARD</h2> <p className="mt-2">Member name: ____________</p> <p>Membership number: ____________</p> <hr className="my-2" /> <div className="mt-2"> <p>Address: 38, Rue Daubenton, 59100 ROUBAIX</p> <p>Phone: 07.54.81.18.88</p> <p>E-Mail: accompagnementsolidaire59@gmail.com </p> </div><p>Prefectural receipt No.: W95002898</p> </div> {/ Back /} <div className="bg-white mt-4 p-4 rounded-lg shadow-md w-full h-full"> <div className="grid grid-cols-2 gap-4"> <div> <p>Use name: ____________</p> <p>Name: ____________</p> <p>Date of birth: ____________</p> <p>Country of birth: ____________</p> <p>Address: ____________</p> <p>Postal code/City: ____________</p> <p>Phone: ____________</p> <p>Recommended email: ____________</p></div> <div className="flex flex-col"> { years.map (year => ( <div key= {year} className="flex items-center mt-2"> <span className="border-2 border-gray-300 rounded-md p-2 flex-1 text-center">{year}</span></div> ))}</div> </div> </div> </div> ); }; export default Adherent card; ``