Clubs - Copy this React, Tailwind Component to your project

Import React, { useState } from "react"; import { FiChevronRight } from "react icons/fi"; const ClubCard = () => { const [clubs] = useState([ { id: 1, name: "Photography Club", members: 128, description: "Capture moments and share your passion for photography", image: "images.unsplash.com/photo 1516035069371 29a1b244cc32" }, { id: 2, name: "Book Club", members: 89, description: "Explore literary worlds and discuss great books", image: "images.unsplash.com/photo 1495446815901 a7297e633e8d" }, { id: 3, name: "Hiking Club", members: 256, description: "Adventure through nature's most beautiful trails", image: "images.unsplash.com/photo 1551632811 561732d1e306" }, { id: 4, name: "Chess Club", members: 64, description: "Master the game of kings and improve your strategy", image: "images.unsplash.com/photo 1529699211952 734e80c4d42b" } ]); return ( <div className="min h screen bg gradient to br from blue 50 to indigo 100 p 6 flex items center justify center"> <div className="w full max w 4xl bg white rounded 2xl shadow xl overflow hidden" role="region" aria label="Clubs listing"> <div className="relative h 48 bg gradient to r from blue 600 to indigo 600"> <h1 className="absolute bottom 6 left 6 text 4xl font bold text white">Clubs</h1> </div> <div className="p 6"> <div className="grid gap 6 md:grid cols 2"> {clubs.map((club) => ( <button key={club.id} className="group relative flex items center p 4 bg white rounded xl shadow md transition all duration 300 hover:shadow lg hover:scale 102 focus:outline none focus:ring 2 focus:ring blue 500" aria label={`View ${club.name}`} > <div className="relative w 24 h 24 rounded lg overflow hidden"> <img src={`https://${club.image}`} alt={club.name} className="w full h full object cover" onError={(e) => { e.target.src = "https://images.unsplash.com/photo 1531206715517 5c0ba140b2b8"; }} /> </div> <div className="ml 4 flex 1"> <h2 className="text xl font semibold text gray 800 mb 1">{club.name}</h2> <p className="text sm text gray 600 mb 2">{club.description}</p> <div className="flex items center text sm text blue 600"> <span>{club.members} members</span> <FiChevronRight className="ml 2 group hover:translate x 1 transition transform duration 300" /> </div> </div> </button> ))} </div> </div> </div> </div> ); }; export default ClubCard; give me this in dark theme