Project Card - Copy this React, Tailwind Component to your project
Tengo un codigo el cual quiero dale un estilo tipo cards que se adapte los datos y que tenga un estilo bonito y agradable para el usuario, aca te dejo el codigo que tenia <div className="max w sm w full bg white rounded 2xl shadow md p 6 flex flex col gap 4"> <div className="flex items center gap 4"> <div className="w 14 h 14 rounded full bg blue 100 text blue 700 font bold flex items center justify center text xl"> {props.account?.firstName?.[0] || "P"} </div> <div> <h2 className="text lg font semibold text gray 800">{props.account?.firstName} {props.account?.lastName}</h2> <p className="text sm text gray 500">{props.constructionCompany}</p> </div> </div> <div className="flex items center text gray 500 text sm gap 2"> <svg xmlns="http://www.w3.org/2000/svg" className="h 4 w 4 text gray 400" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 2a6 6 0 00 6 6c0 3.866 6 10 6 10s6 6.134 6 10a6 6 0 00 6 6zM8 9a2 2 0 114 0 2 2 0 01 4 0z" /> </svg> <span>{props.location}</span> </div> <div className="text sm text gray 700 leading 5"> <p><strong>Proyecto:</strong> {props.name}</p> <p>{props.description}</p> </div> <div className="flex flex wrap gap 2"> <span className="bg blue 100 text blue 800 text xs font medium px 2 py 1 rounded full"> Estado: {props.status} </span> <span className="bg gray 100 text gray 800 text xs font medium px 2 py 1 rounded full"> Inicio: {props.startDate} </span> <span className="bg gray 100 text gray 800 text xs font medium px 2 py 1 rounded full"> Fin: {props.endDate} </span> </div> <div className="flex justify between items center"> <div> <p className="text lg font semibold text gray 800">${props.estimatedAmount || "N/A"}</p> <p className="text xs text gray 400">Costo estimado</p> </div> <button onClick={() => setProjectStorage(props?.lifting?.uuid)} disabled={!props?.lifting?.uuid} className={`px 4 py 2 text sm rounded full font medium transition colors duration 300 ${ props?.lifting?.uuid ? "bg blue 600 text white hover:bg blue 700" : "bg gray 300 text gray 500 cursor not allowed" }`} > Ver levantamiento </button> </div> </div>
