Watermark

Component 1

About

A content wrapper that overlays a repeating, rotated tiled text pattern (like an anti-counterfeit stamp on a ticket or pass) behind its children.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Watermark to your project and fits it to your theme.

Code

How Watermark is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Watermark } from "@/components/ui/watermark";

export default function WatermarkDemo() {
  return (
    <div className="flex items-center justify-center p-10 bg-background min-h-screen">
      <Watermark
        text="OFFICIAL PASS • NON-TRANSFERABLE"
        notched
        className="w-full max-w-sm"
      >
        <div className="p-6 space-y-4">
          <div className="flex items-center justify-between">
            <span className="font-mono text-xs tracking-widest text-muted-foreground">
              VIP PASS #0042
            </span>
            <span className="font-mono text-xs tracking-widest text-emerald-500">
              VERIFIED
            </span>
          </div>
          <h3 className="text-2xl font-bold text-foreground">
            ALL-ARENA ACCESS
          </h3>
          <p className="text-sm text-muted-foreground">
            HOLDER: MARCUS AURELIUS // BOX 01
          </p>
        </div>
      </Watermark>
    </div>
  );
}