Modern Card - Copy this React, Tailwind Component to your project

Import React from "react"; const Card = ({ item, onClick }) => { return ( <div onClick={onClick} className={` w full rounded 2xl overflow hidden cursor pointer shadow lg hover:shadow 2xl transform hover: translate y 1.5 transition all duration 300 bg gradient to br from [#2a82c9] via [#4db1f8] to [#0a62d1] border 2 border transparent hover:border white `} role={onClick ? "button" : undefined} tabIndex={onClick ? 0 : undefined} onKeyDown={(e) => { if (onClick && (e.key === "Enter" || e.key === " ")) { onClick(); } }} > <div className="relative rounded t 2xl overflow hidden h 56 bg white flex items center justify center shadow inner"> <img src={item.imageUrl} alt={item.title} loading="lazy" className="w full max h full object contain transition transform duration 500 ease in out hover:scale 105 hover: translate y 0.5 hover:brightness 110" /> </div> <div className="p 5 text center text white"> <h3 className="text lg font semibold drop shadow lg">{item.title}</h3> </div> </div> ); }; export default Card; Please redesign this React card component with a modern, attractive, and clean style using Tailwind CSS. Keep it simple and elegant with smooth hover effects, subtle shadows, and a nice color gradient background. Make sure the card is fully clickable and accessible (keyboard support). Include a nice image display area with smooth scaling and brightness effects on hover. Display the title clearly with good contrast and subtle text shadows for readability. Use rounded corners, soft borders, and smooth transitions for a polished look. Remove any TypeScript specific syntax; provide the component as plain JavaScript (JSX). Provide the full React functional component code.