Tarjeta neumórfica

/**
 * Tarjeta neumórfica: una superficie extruida con un pozo hundido para el icono.
 * Funciona sobre un fondo del mismo color (#e0e5ec por defecto); para otro, define `--gcc-bg`,
 * `--gcc-shadow` y `--gcc-highlight` en un contenedor.
 *
 *   <NeumorphicCard icon={<SettingsIcon />} title="Ajustes">Preferencias de la cuenta</NeumorphicCard>
 */

import type { HTMLAttributes, ReactNode } from "react";

export type NeumorphicCardProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
  icon?: ReactNode;
  title: ReactNode;
};

const CSS = `
.gcc-card { --gcc-ground: var(--gcc-bg, #e0e5ec); --gcc-dark: var(--gcc-shadow, #a3b1c6); --gcc-light: var(--gcc-highlight, #ffffff); display: grid; gap: 14px; box-sizing: border-box; width: 100%; max-width: 340px; padding: 28px; border-radius: 28px; background: var(--gcc-ground); color: #3b4658; font-family: inherit;
  box-shadow: 14px 14px 28px var(--gcc-dark), -14px -14px 28px var(--gcc-light); transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.16, 1, .3, 1); }
.gcc-card:hover { transform: translateY(-3px); box-shadow: 18px 18px 34px var(--gcc-dark), -18px -18px 34px var(--gcc-light); }
.gcc-well { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 20px; color: #4f5bd5; background: var(--gcc-ground); box-shadow: inset 6px 6px 12px var(--gcc-dark), inset -6px -6px 12px var(--gcc-light); }
.gcc-well svg { width: 26px; height: 26px; }
.gcc-title { margin: 6px 0 0; color: #2f3a4c; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.gcc-body { margin: 0; color: #5d6b80; font-size: 15px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .gcc-card { transition: none; } .gcc-card:hover { transform: none; } }
`;

export function NeumorphicCard({ icon, title, className, children, ...props }: NeumorphicCardProps) {
  return (
    <>
      <style>{CSS}</style>
      <div {...props} className={["gcc-card", className].filter(Boolean).join(" ")}>
        {icon ? <span className="gcc-well" aria-hidden="true">{icon}</span> : null}
        <h3 className="gcc-title">{title}</h3>
        <div className="gcc-body">{children}</div>
      </div>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/tarjeta-neumorfica

import { NeumorphicCard } from "./neumorphic-card";

export default function Ejemplo() {
  return <NeumorphicCard />;
}