Tarjeta neobrutalista

"use client";

import type { CSSProperties } from "react";

/** Tarjeta neobrutalista: borde grueso, color plano, sello inclinado y sombra dura que se acorta al apuntarla. React + TypeScript, sin dependencias. */
export type TarjetaNeobrutalProps = {
  title?: string;
  text?: string;
  tag?: string;
  action?: string;
  color?: string;
  onAction?: () => void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gctnb-root { box-sizing: border-box; display: block; width: 100%; max-width: 320px; color: #111; font: 600 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.gctnb-root *, .gctnb-root *::before, .gctnb-root *::after { box-sizing: border-box; }
.gctnb-root button { font: inherit; }
.gctnb-root :focus-visible { outline: 3px solid #2f5bff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gctnb-root *, .gctnb-root *::before, .gctnb-root *::after { transition-duration: .01ms !important; } }
.gctnb-card { position: relative; padding: 24px; border: 4px solid #111; background: var(--gctnb-bg, #ff90e8); box-shadow: 8px 8px 0 #111; transition: transform .14s, box-shadow .14s; }
.gctnb-card:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 #111; }
.gctnb-tag { position: absolute; top: -18px; right: 16px; padding: 6px 12px; border: 3px solid #111; background: #ffe14d; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(4deg); }
.gctnb-title { margin: 0 0 8px; font-size: 28px; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }
.gctnb-text { margin: 0 0 20px; font-weight: 600; }
.gctnb-btn { min-height: 46px; padding: 0 20px; border: 3px solid #111; background: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; box-shadow: 4px 4px 0 #111; transition: transform .1s, box-shadow .1s, background .1s; }
.gctnb-btn:hover { background: #ffe14d; }
.gctnb-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #111; }`;

export function TarjetaNeobrutal({ title = "Lanza tu tienda", text = "Catálogo, pagos y envíos listos en una tarde. Sin cuentas raras.", tag = "Nuevo", action = "Empezar ya", color, onAction, className = "", style }: TarjetaNeobrutalProps) {
  const vars = color ? ({ "--gctnb-bg": color } as CSSProperties) : undefined;
  return (
    <div className={`gctnb-root ${className}`} style={{ ...vars, ...style }}>
      <style>{CSS}</style>
      <article className="gctnb-card">
        <span className="gctnb-tag">{tag}</span>
        <h3 className="gctnb-title">{title}</h3>
        <p className="gctnb-text">{text}</p>
        <button className="gctnb-btn" type="button" onClick={onAction}>
          {action}
        </button>
      </article>
    </div>
  );
}

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

import { TarjetaNeobrutal } from "./tarjeta-neobrutal";

export default function Ejemplo() {
  return <TarjetaNeobrutal title="Ejemplo" />;
}