pdfn 0.0.1 → 0.2.0

package/templates/inline/letter.tsx

@@ -0,0 +1,129 @@
+import { Document, Page } from "@pdfn/react";
+
+/**
+ * Business Letter template - US Letter size (inline styles)
+ *
+ * Demonstrates:
+ * - Professional letterhead
+ * - Proper business letter format
+ * - Single page layout
+ */
+
+interface LetterProps {
+  sender?: {
+    name: string;
+    title?: string;
+    company: string;
+    address: string;
+    city: string;
+    email: string;
+    phone: string;
+  };
+  recipient?: {
+    name: string;
+    title?: string;
+    company: string;
+    address: string;
+    city: string;
+  };
+  date?: string;
+  subject?: string;
+  body?: string[];
+  closing?: string;
+  signature?: string;
+}
+
+export default function Letter({
+  sender = {
+    name: "Alex Chen",
+    title: "Head of Partnerships",
+    company: "Your Company",
+    address: "123 Business St, Suite 100",
+    city: "San Francisco, CA 94102",
+    email: "alex@yourcompany.com",
+    phone: "+1 (555) 123-4567",
+  },
+  recipient = {
+    name: "Sarah Johnson",
+    title: "Chief Technology Officer",
+    company: "Acme Corporation",
+    address: "456 Enterprise Blvd, Suite 100",
+    city: "Austin, TX 78701",
+  },
+  date = "January 15, 2025",
+  subject = "Partnership Proposal",
+  body = [
+    "I hope this letter finds you well. Following our conversation last month, I wanted to formally present our partnership proposal for your consideration.",
+    "Our solution has helped over 500 companies streamline their workflows, reducing development time by an average of 60%. We believe our platform would be an excellent fit for your needs.",
+    "I would welcome the opportunity to schedule a technical demo with your team. Please let me know if you would be available for a call next week.",
+  ],
+  closing = "Best regards",
+  signature = "Alex Chen",
+}: LetterProps) {
+  return (
+    <Document title={`Letter - ${subject}`}>
+      <Page size="Letter" margin="1in">
+        {/* Letterhead */}
+        <div style={{ marginBottom: "24px", paddingBottom: "12px", borderBottom: "2px solid #1f2937" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+            <div>
+              <div style={{ fontSize: "20px", fontWeight: "bold", color: "#111827" }}>{sender.company}</div>
+              <div style={{ fontSize: "10px", color: "#6b7280", marginTop: "4px" }}>
+                {sender.address} • {sender.city}
+              </div>
+            </div>
+            <div style={{ textAlign: "right", fontSize: "10px", color: "#6b7280" }}>
+              <div>{sender.email}</div>
+              <div>{sender.phone}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Date */}
+        <div style={{ fontSize: "14px", color: "#374151", marginBottom: "24px" }}>{date}</div>
+
+        {/* Recipient Info */}
+        <div style={{ marginBottom: "24px" }}>
+          <div style={{ fontSize: "14px", fontWeight: "600", color: "#111827" }}>{recipient.name}</div>
+          {recipient.title && (
+            <div style={{ fontSize: "14px", color: "#4b5563" }}>{recipient.title}</div>
+          )}
+          <div style={{ fontSize: "14px", color: "#4b5563" }}>{recipient.company}</div>
+          <div style={{ fontSize: "14px", color: "#6b7280" }}>
+            {recipient.address}, {recipient.city}
+          </div>
+        </div>
+
+        {/* Subject Line */}
+        <div style={{ marginBottom: "16px", padding: "6px 0 6px 12px", borderLeft: "4px solid #1f2937", backgroundColor: "#f9fafb" }}>
+          <span style={{ fontSize: "14px", fontWeight: "bold", color: "#111827", textTransform: "uppercase", letterSpacing: "0.05em" }}>Re: </span>
+          <span style={{ fontSize: "14px", fontWeight: "500", color: "#1f2937" }}>{subject}</span>
+        </div>
+
+        {/* Salutation */}
+        <div style={{ fontSize: "14px", color: "#111827", marginBottom: "12px" }}>Dear {recipient.name},</div>
+
+        {/* Body */}
+        <div style={{ marginBottom: "24px" }}>
+          {body.map((paragraph, i) => (
+            <p key={i} style={{ fontSize: "14px", color: "#374151", lineHeight: "1.625", marginBottom: "12px" }}>
+              {paragraph}
+            </p>
+          ))}
+        </div>
+
+        {/* Closing & Signature */}
+        <div style={{ marginTop: "24px" }}>
+          <div style={{ fontSize: "14px", color: "#111827", marginBottom: "24px" }}>{closing},</div>
+          <div style={{ borderBottom: "1px solid #d1d5db", width: "160px", marginBottom: "4px" }}></div>
+          <div style={{ fontSize: "14px", fontWeight: "bold", color: "#111827" }}>{signature}</div>
+          {sender.title && (
+            <div style={{ fontSize: "10px", color: "#4b5563" }}>
+              {sender.title}, {sender.company}
+            </div>
+          )}
+        </div>
+      </Page>
+    </Document>
+  );
+}

package/templates/inline/poster.tsx

@@ -0,0 +1,128 @@
+import { Document, Page } from "@pdfn/react";
+
+/**
+ * Event Poster template - Tabloid size, Landscape (inline styles)
+ *
+ * Demonstrates:
+ * - Large format (Tabloid: 17" x 11")
+ * - Landscape orientation
+ * - Full-bleed design (margin: 0)
+ * - Bold typography and visual hierarchy
+ */
+
+interface PosterProps {
+  headline?: string;
+  year?: string;
+  subheadline?: string;
+  date?: string;
+  venue?: string;
+  highlights?: string[];
+  cta?: string;
+  website?: string;
+}
+
+export default function Poster({
+  headline = "Tech Conference",
+  year = "2025",
+  subheadline = "Innovation Meets Inspiration",
+  date = "March 15-17, 2025",
+  venue = "Convention Center, San Francisco",
+  highlights = ["50+ Speakers", "Workshops", "Networking"],
+  cta = "Get Tickets",
+  website = "techconf2025.com",
+}: PosterProps) {
+  // Tabloid landscape dimensions
+  const pageHeight = "792pt"; // 11 inches
+
+  return (
+    <Document title={`Poster - ${headline}`}>
+      <Page size="Tabloid" orientation="landscape" margin="0">
+        {/* Full bleed dark background */}
+        <div
+          style={{
+            backgroundColor: "#111827",
+            color: "white",
+            padding: "48px",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: pageHeight,
+            height: pageHeight,
+          }}
+        >
+          {/* Top Section: Logo and Accent */}
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "16px" }}>
+            <div style={{ fontSize: "24px", fontWeight: "900", color: "white" }}>PDFN</div>
+            <div style={{ display: "flex", gap: "8px" }}>
+              <div style={{ height: "6px", width: "128px", backgroundColor: "#06b6d4", borderRadius: "9999px" }}></div>
+              <div style={{ height: "6px", width: "64px", backgroundColor: "rgba(6, 182, 212, 0.5)", borderRadius: "9999px" }}></div>
+              <div style={{ height: "6px", width: "32px", backgroundColor: "rgba(6, 182, 212, 0.25)", borderRadius: "9999px" }}></div>
+            </div>
+          </div>
+
+          {/* Main Content - Vertically Centered */}
+          <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+            {/* Headline */}
+            <h1 style={{ fontSize: "96px", fontWeight: "900", letterSpacing: "-0.025em", lineHeight: 1, marginBottom: "24px", margin: 0 }}>
+              {headline}
+              {year && <span style={{ color: "#22d3ee" }}> {year}</span>}
+            </h1>
+
+            {subheadline && (
+              <p style={{ fontSize: "30px", color: "#9ca3af", fontWeight: "300", maxWidth: "768px", marginBottom: "48px", marginTop: "24px" }}>
+                {subheadline}
+              </p>
+            )}
+
+            {/* Event Details */}
+            <div style={{ display: "flex", gap: "80px" }}>
+              <div>
+                <div style={{ fontSize: "14px", color: "#06b6d4", textTransform: "uppercase", letterSpacing: "0.2em", fontWeight: "bold", marginBottom: "8px" }}>
+                  Date
+                </div>
+                <div style={{ fontSize: "36px", fontWeight: "bold" }}>{date}</div>
+              </div>
+              <div>
+                <div style={{ fontSize: "14px", color: "#06b6d4", textTransform: "uppercase", letterSpacing: "0.2em", fontWeight: "bold", marginBottom: "8px" }}>
+                  Venue
+                </div>
+                <div style={{ fontSize: "36px", fontWeight: "bold" }}>{venue}</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Section */}
+          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
+            {/* Highlights/Tags */}
+            <div style={{ display: "flex", gap: "16px" }}>
+              {highlights.map((highlight, i) => (
+                <div
+                  key={i}
+                  style={{ border: "2px solid #4b5563", color: "white", padding: "12px 24px", borderRadius: "9999px", fontSize: "16px", fontWeight: "600" }}
+                >
+                  {highlight}
+                </div>
+              ))}
+            </div>
+
+            {/* CTA */}
+            <div style={{ textAlign: "right" }}>
+              <div style={{ display: "inline-block", backgroundColor: "#06b6d4", color: "#111827", fontSize: "24px", fontWeight: "900", padding: "20px 40px", borderRadius: "12px" }}>
+                {cta}
+              </div>
+              <div style={{ fontSize: "16px", color: "#6b7280", marginTop: "16px", fontFamily: "monospace", letterSpacing: "0.05em" }}>
+                {website}
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Accent */}
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "32px" }}>
+            <div style={{ height: "6px", width: "32px", backgroundColor: "rgba(6, 182, 212, 0.25)", borderRadius: "9999px" }}></div>
+            <div style={{ height: "6px", width: "64px", backgroundColor: "rgba(6, 182, 212, 0.5)", borderRadius: "9999px" }}></div>
+            <div style={{ height: "6px", width: "128px", backgroundColor: "#06b6d4", borderRadius: "9999px" }}></div>
+          </div>
+        </div>
+      </Page>
+    </Document>
+  );
+}

package/templates/inline/ticket.tsx

@@ -0,0 +1,138 @@
+import { Document, Page } from "@pdfn/react";
+
+/**
+ * Event Ticket template - A5 size (inline styles)
+ *
+ * Demonstrates:
+ * - Compact page size (A5: 148mm x 210mm)
+ * - Creative visual design with banner
+ * - QR code placeholder
+ */
+
+interface TicketProps {
+  event?: string;
+  year?: string;
+  tagline?: string;
+  date?: string;
+  time?: string;
+  venue?: string;
+  venueAddress?: string;
+  attendee?: string;
+  ticketType?: string;
+  ticketNumber?: string;
+  price?: string;
+}
+
+export default function Ticket({
+  event = "Tech Conference",
+  year = "2025",
+  tagline = "Innovation Meets Inspiration",
+  date = "March 15, 2025",
+  time = "9:00 AM - 6:00 PM",
+  venue = "Convention Center",
+  venueAddress = "123 Main St, San Francisco, CA",
+  attendee = "John Smith",
+  ticketType = "VIP Access",
+  ticketNumber = "TC25-VIP-001234",
+  price = "$599.00",
+}: TicketProps) {
+  return (
+    <Document title={`Ticket - ${event}`}>
+      <Page size="A5" margin="0">
+        {/* Header Banner */}
+        <div style={{ backgroundColor: "#111827", padding: "28px 24px", textAlign: "center" }}>
+          <div style={{ fontSize: "30px", fontWeight: "900", color: "white", letterSpacing: "0.05em" }}>
+            {event}
+            {year && <span style={{ color: "#22d3ee" }}> {year}</span>}
+          </div>
+          {tagline && (
+            <div style={{ fontSize: "14px", color: "#22d3ee", marginTop: "8px", fontWeight: "500", textTransform: "uppercase", letterSpacing: "0.2em" }}>
+              {tagline}
+            </div>
+          )}
+        </div>
+
+        {/* Ticket Content */}
+        <div style={{ padding: "20px 24px" }}>
+          {/* Ticket Type Badge */}
+          <div style={{ display: "flex", justifyContent: "center", marginTop: "-40px", marginBottom: "20px" }}>
+            <div style={{ backgroundColor: "#06b6d4", color: "#111827", fontSize: "10px", fontWeight: "bold", textTransform: "uppercase", padding: "8px 20px", borderRadius: "9999px", letterSpacing: "0.2em" }}>
+              {ticketType}
+            </div>
+          </div>
+
+          {/* Event Details Grid */}
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", marginBottom: "20px" }}>
+            <div style={{ backgroundColor: "#f9fafb", borderRadius: "8px", padding: "14px", textAlign: "center" }}>
+              <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500" }}>
+                Date
+              </div>
+              <div style={{ fontSize: "16px", fontWeight: "bold", color: "#111827", marginTop: "4px" }}>{date}</div>
+            </div>
+            <div style={{ backgroundColor: "#f9fafb", borderRadius: "8px", padding: "14px", textAlign: "center" }}>
+              <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500" }}>
+                Time
+              </div>
+              <div style={{ fontSize: "16px", fontWeight: "bold", color: "#111827", marginTop: "4px" }}>{time}</div>
+            </div>
+          </div>
+
+          {/* Venue */}
+          <div style={{ backgroundColor: "#f9fafb", borderRadius: "8px", padding: "14px", textAlign: "center", marginBottom: "20px" }}>
+            <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500" }}>
+              Venue
+            </div>
+            <div style={{ fontSize: "16px", fontWeight: "bold", color: "#111827", marginTop: "4px" }}>{venue}</div>
+            <div style={{ fontSize: "10px", color: "#6b7280", marginTop: "4px" }}>{venueAddress}</div>
+          </div>
+
+          {/* Tear Line */}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px", margin: "20px 0" }}>
+            <div style={{ flex: 1, borderTop: "2px dashed #d1d5db" }}></div>
+            <div style={{ fontSize: "14px", color: "#9ca3af" }}>✂</div>
+            <div style={{ flex: 1, borderTop: "2px dashed #d1d5db" }}></div>
+          </div>
+
+          {/* Attendee Section */}
+          <div style={{ textAlign: "center", marginBottom: "20px" }}>
+            <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500", marginBottom: "4px" }}>
+              Admit One
+            </div>
+            <div style={{ fontSize: "36px", fontWeight: "900", color: "#111827" }}>{attendee}</div>
+          </div>
+
+          {/* QR Code Area */}
+          <div style={{ display: "flex", justifyContent: "center", marginBottom: "20px" }}>
+            <div style={{ width: "144px", height: "144px", backgroundColor: "white", border: "2px solid #111827", borderRadius: "12px", padding: "8px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+              {/* Simulated QR pattern */}
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "4px", width: "100%", height: "100%" }}>
+                {[...Array(25)].map((_, i) => (
+                  <div
+                    key={i}
+                    style={{
+                      borderRadius: "2px",
+                      backgroundColor: [0, 1, 2, 4, 5, 6, 10, 12, 14, 18, 19, 20, 22, 23, 24].includes(i)
+                        ? "#111827"
+                        : "#f3f4f6"
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "14px", borderTop: "2px solid #111827", paddingTop: "12px" }}>
+            <div style={{ fontFamily: "monospace", fontSize: "10px", color: "#4b5563" }}>{ticketNumber}</div>
+            <div style={{ fontWeight: "bold", fontSize: "18px", color: "#111827" }}>{price}</div>
+          </div>
+
+          {/* Terms */}
+          <p style={{ textAlign: "center", fontSize: "10px", color: "#9ca3af", marginTop: "12px" }}>
+            Non-transferable • Non-refundable • Present at entry
+          </p>
+        </div>
+      </Page>
+    </Document>
+  );
+}

package/templates/tailwind/contract.tsx

@@ -0,0 +1,220 @@
+import { Document, Page, PageNumber, TotalPages, AvoidBreak } from "@pdfn/react";
+import { Tailwind } from "@pdfn/tailwind";
+
+/**
+ * Service Agreement Contract template - Legal size (taller page)
+ *
+ * Demonstrates:
+ * - Watermark (e.g., "CONFIDENTIAL", "DRAFT")
+ * - Repeating header and footer
+ * - Multi-page content with numbered terms
+ * - AvoidBreak for signature block
+ */
+
+interface ContractProps {
+  title?: string;
+  effectiveDate?: string;
+  watermark?: string;
+  parties?: {
+    provider: {
+      name: string;
+      address: string;
+      representative: string;
+    };
+    client: {
+      name: string;
+      address: string;
+      representative: string;
+    };
+  };
+  terms?: Array<{
+    title: string;
+    content: string;
+  }>;
+  signatures?: {
+    provider: { name: string; title: string };
+    client: { name: string; title: string };
+  };
+}
+
+export default function Contract({
+  title = "SERVICE AGREEMENT",
+  effectiveDate = "January 1, 2025",
+  watermark = "DRAFT",
+  parties = {
+    provider: {
+      name: "Your Company, Inc.",
+      address: "123 Business St, San Francisco, CA 94102",
+      representative: "Alex Chen, CEO",
+    },
+    client: {
+      name: "Acme Corporation",
+      address: "456 Enterprise Blvd, Austin, TX 78701",
+      representative: "Sarah Johnson, CTO",
+    },
+  },
+  terms = [
+    {
+      title: "Services",
+      content:
+        "Provider agrees to deliver the Platform including all features and any updates released during the term of this Agreement.",
+    },
+    {
+      title: "Compensation",
+      content:
+        "Client shall pay Provider an annual license fee as specified in the Order Form. All fees are non-refundable and exclusive of applicable taxes.",
+    },
+    {
+      title: "Term and Termination",
+      content:
+        "This Agreement shall commence on the Effective Date and continue for twelve (12) months, automatically renewing unless either party provides written notice at least thirty (30) days prior.",
+    },
+    {
+      title: "Confidentiality",
+      content:
+        "Both parties agree to maintain the confidentiality of any proprietary information disclosed during this engagement. This obligation shall survive termination for three (3) years.",
+    },
+  ],
+  signatures = {
+    provider: { name: "Alex Chen", title: "CEO" },
+    client: { name: "Sarah Johnson", title: "CTO" },
+  },
+}: ContractProps) {
+  return (
+    <Document title={title}>
+      <Tailwind>
+        <Page
+          size="Legal"
+          margin="1in"
+          watermark={
+            watermark
+              ? {
+                  text: watermark,
+                  opacity: 0.08,
+                  rotation: -35,
+                }
+              : undefined
+          }
+          header={
+            <div className="flex justify-between items-center pb-3 border-b border-gray-300 mb-6">
+              <div className="text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                {title}
+              </div>
+              <div className="text-xs text-gray-500">Effective: {effectiveDate}</div>
+            </div>
+          }
+          footer={
+            <div className="pt-3 border-t border-gray-300">
+              <div className="flex justify-between items-center text-xs text-gray-500">
+                <div>{parties.provider.name} — Confidential</div>
+                <div>
+                  Page <PageNumber /> of <TotalPages />
+                </div>
+              </div>
+            </div>
+          }
+        >
+          {/* Parties Introduction */}
+          <p className="text-sm text-gray-700 leading-relaxed mb-6">
+            This {title} (&ldquo;Agreement&rdquo;) is entered into as of{" "}
+            <span className="font-semibold">{effectiveDate}</span> by and between the following
+            parties:
+          </p>
+
+          {/* Parties */}
+          <div className="grid grid-cols-2 gap-6 mb-8">
+            <div className="border-2 border-gray-800 rounded-lg p-4">
+              <div className="text-xs font-bold text-gray-800 uppercase tracking-wider mb-2">
+                Service Provider
+              </div>
+              <div className="text-sm font-bold text-gray-900">{parties.provider.name}</div>
+              <div className="text-xs text-gray-600 mt-1">{parties.provider.address}</div>
+              <div className="text-xs text-gray-500 mt-2">
+                <span className="font-medium">Representative: </span>
+                {parties.provider.representative}
+              </div>
+            </div>
+            <div className="border border-gray-300 rounded-lg p-4">
+              <div className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2">
+                Client
+              </div>
+              <div className="text-sm font-bold text-gray-900">{parties.client.name}</div>
+              <div className="text-xs text-gray-600 mt-1">{parties.client.address}</div>
+              <div className="text-xs text-gray-500 mt-2">
+                <span className="font-medium">Representative: </span>
+                {parties.client.representative}
+              </div>
+            </div>
+          </div>
+
+          {/* Terms Section Header */}
+          <div className="flex items-center gap-4 mb-6">
+            <div className="flex-1 border-t-2 border-gray-800"></div>
+            <h2 className="text-sm font-black text-gray-900 uppercase tracking-wider">
+              Terms and Conditions
+            </h2>
+            <div className="flex-1 border-t-2 border-gray-800"></div>
+          </div>
+
+          {/* Terms */}
+          <div className="space-y-5 mb-8">
+            {terms.map((term, i) => (
+              <div key={i} className="flex gap-4">
+                <div className="w-7 h-7 rounded-full bg-gray-800 text-white text-xs font-bold flex items-center justify-center flex-shrink-0">
+                  {i + 1}
+                </div>
+                <div className="flex-1">
+                  <h3 className="text-sm font-bold text-gray-900 mb-1">{term.title}</h3>
+                  <p className="text-xs text-gray-600 leading-relaxed">{term.content}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Agreement Statement */}
+          <div className="mb-8 bg-gray-100 p-5 rounded-lg">
+            <p className="text-xs text-gray-700 leading-relaxed text-center">
+              <strong className="text-gray-900">IN WITNESS WHEREOF</strong>, the parties have
+              executed this Agreement as of the Effective Date. Both parties acknowledge that they
+              have read, understood, and agree to be bound by all terms and conditions set forth
+              herein.
+            </p>
+          </div>
+
+          {/* Signatures */}
+          <AvoidBreak>
+            <div className="grid grid-cols-2 gap-10">
+              {/* Provider Signature */}
+              <div>
+                <div className="text-xs font-bold text-gray-800 uppercase tracking-wider mb-4">
+                  Service Provider
+                </div>
+                <div className="border-b-2 border-gray-800 mb-2 h-10"></div>
+                <div className="text-sm font-bold text-gray-900">
+                  {signatures.provider.name}
+                </div>
+                <div className="text-xs text-gray-600">{signatures.provider.title}</div>
+                <div className="mt-3 flex gap-4 text-xs text-gray-500">
+                  <div>Date: _______________</div>
+                </div>
+              </div>
+
+              {/* Client Signature */}
+              <div>
+                <div className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">
+                  Client
+                </div>
+                <div className="border-b-2 border-gray-800 mb-2 h-10"></div>
+                <div className="text-sm font-bold text-gray-900">{signatures.client.name}</div>
+                <div className="text-xs text-gray-600">{signatures.client.title}</div>
+                <div className="mt-3 flex gap-4 text-xs text-gray-500">
+                  <div>Date: _______________</div>
+                </div>
+              </div>
+            </div>
+          </AvoidBreak>
+        </Page>
+      </Tailwind>
+    </Document>
+  );
+}