MALIKA
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;
``
·