documenttailwindpdf

Purchase Receipt

Send a clean PDF receipt on every purchase — generated and emailed in the same request.

Request body
{
  "type": "tailwind",
  "content": "<div class=\"flex h-full w-full flex-col bg-white p-14 text-slate-900\">\n  <div class=\"flex items-center justify-between border-b border-slate-200 pb-8\">\n    <div class=\"flex flex-col\">\n      <span class=\"text-2xl font-bold\">Juniper Store</span>\n      <span class=\"mt-1 text-sm text-slate-500\">Order Confirmation</span>\n    </div>\n    <div class=\"flex flex-col items-end\">\n      <span class=\"rounded-full bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-700\">PAID</span>\n      <span class=\"mt-2 font-mono text-xs text-slate-400\">#JST-20260714-8821</span>\n    </div>\n  </div>\n  <div class=\"mt-8 flex items-center justify-between\">\n    <div class=\"flex flex-col\">\n      <span class=\"text-xs font-medium uppercase text-slate-400\">Customer</span>\n      <span class=\"mt-1 text-base font-semibold\">Alex Rivera</span>\n      <span class=\"text-sm text-slate-500\">Maple District, Rivertown</span>\n    </div>\n    <div class=\"flex flex-col items-end\">\n      <span class=\"text-xs font-medium uppercase text-slate-400\">Date</span>\n      <span class=\"mt-1 text-base font-semibold\">July 14, 2026</span>\n      <span class=\"text-sm text-slate-500\">10:42 AM</span>\n    </div>\n  </div>\n  <div class=\"mt-10 flex flex-col\">\n    <div class=\"flex items-center justify-between border-b border-slate-900 pb-3\">\n      <span class=\"text-xs font-semibold uppercase text-slate-500\">Item</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-xs font-semibold uppercase text-slate-500\">Qty</span>\n        <span class=\"ml-8 w-20 text-right text-xs font-semibold uppercase text-slate-500\">Total</span>\n      </div>\n    </div>\n    <div class=\"flex items-center justify-between border-b border-slate-100 py-4\">\n      <span class=\"text-base\">Wireless Noise-Cancelling Headphones</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-sm text-slate-500\">1</span>\n        <span class=\"ml-8 w-20 text-right font-medium\">$179.00</span>\n      </div>\n    </div>\n    <div class=\"flex items-center justify-between border-b border-slate-100 py-4\">\n      <span class=\"text-base\">USB-C Charging Cable (2m)</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-sm text-slate-500\">2</span>\n        <span class=\"ml-8 w-20 text-right font-medium\">$24.00</span>\n      </div>\n    </div>\n    <div class=\"flex items-center justify-between py-4\">\n      <span class=\"text-base\">Carry Case</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-sm text-slate-500\">1</span>\n        <span class=\"ml-8 w-20 text-right font-medium\">$19.00</span>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col items-end border-t border-slate-200 pt-4\">\n    <div class=\"flex w-64 items-center justify-between\">\n      <span class=\"text-sm text-slate-500\">Subtotal</span>\n      <span class=\"text-sm\">$222.00</span>\n    </div>\n    <div class=\"mt-2 flex w-64 items-center justify-between\">\n      <span class=\"text-sm text-slate-500\">Tax (8%)</span>\n      <span class=\"text-sm\">$17.76</span>\n    </div>\n    <div class=\"mt-3 flex w-64 items-center justify-between border-t border-slate-200 pt-3\">\n      <span class=\"text-base font-bold\">Total paid</span>\n      <span class=\"text-xl font-bold text-emerald-600\">$239.76</span>\n    </div>\n  </div>\n  <div class=\"flex items-center justify-center pt-10\">\n    <span class=\"text-xs text-slate-400\">Thank you for your order · Questions? Contact support at Juniper Store</span>\n  </div>\n</div>",
  "options": {
    "format": "pdf",
    "dimensions": "a4",
    "scale": 2
  }
}

Code example

curl -X POST https://renderfy.io/api/v1/render \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
  "type": "tailwind",
  "content": "<div class=\"flex h-full w-full flex-col bg-white p-14 text-slate-900\">\n  <div class=\"flex items-center justify-between border-b border-slate-200 pb-8\">\n    <div class=\"flex flex-col\">\n      <span class=\"text-2xl font-bold\">Juniper Store</span>\n      <span class=\"mt-1 text-sm text-slate-500\">Order Confirmation</span>\n    </div>\n    <div class=\"flex flex-col items-end\">\n      <span class=\"rounded-full bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-700\">PAID</span>\n      <span class=\"mt-2 font-mono text-xs text-slate-400\">#JST-20260714-8821</span>\n    </div>\n  </div>\n  <div class=\"mt-8 flex items-center justify-between\">\n    <div class=\"flex flex-col\">\n      <span class=\"text-xs font-medium uppercase text-slate-400\">Customer</span>\n      <span class=\"mt-1 text-base font-semibold\">Alex Rivera</span>\n      <span class=\"text-sm text-slate-500\">Maple District, Rivertown</span>\n    </div>\n    <div class=\"flex flex-col items-end\">\n      <span class=\"text-xs font-medium uppercase text-slate-400\">Date</span>\n      <span class=\"mt-1 text-base font-semibold\">July 14, 2026</span>\n      <span class=\"text-sm text-slate-500\">10:42 AM</span>\n    </div>\n  </div>\n  <div class=\"mt-10 flex flex-col\">\n    <div class=\"flex items-center justify-between border-b border-slate-900 pb-3\">\n      <span class=\"text-xs font-semibold uppercase text-slate-500\">Item</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-xs font-semibold uppercase text-slate-500\">Qty</span>\n        <span class=\"ml-8 w-20 text-right text-xs font-semibold uppercase text-slate-500\">Total</span>\n      </div>\n    </div>\n    <div class=\"flex items-center justify-between border-b border-slate-100 py-4\">\n      <span class=\"text-base\">Wireless Noise-Cancelling Headphones</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-sm text-slate-500\">1</span>\n        <span class=\"ml-8 w-20 text-right font-medium\">$179.00</span>\n      </div>\n    </div>\n    <div class=\"flex items-center justify-between border-b border-slate-100 py-4\">\n      <span class=\"text-base\">USB-C Charging Cable (2m)</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-sm text-slate-500\">2</span>\n        <span class=\"ml-8 w-20 text-right font-medium\">$24.00</span>\n      </div>\n    </div>\n    <div class=\"flex items-center justify-between py-4\">\n      <span class=\"text-base\">Carry Case</span>\n      <div class=\"flex items-center\">\n        <span class=\"w-16 text-right text-sm text-slate-500\">1</span>\n        <span class=\"ml-8 w-20 text-right font-medium\">$19.00</span>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col items-end border-t border-slate-200 pt-4\">\n    <div class=\"flex w-64 items-center justify-between\">\n      <span class=\"text-sm text-slate-500\">Subtotal</span>\n      <span class=\"text-sm\">$222.00</span>\n    </div>\n    <div class=\"mt-2 flex w-64 items-center justify-between\">\n      <span class=\"text-sm text-slate-500\">Tax (8%)</span>\n      <span class=\"text-sm\">$17.76</span>\n    </div>\n    <div class=\"mt-3 flex w-64 items-center justify-between border-t border-slate-200 pt-3\">\n      <span class=\"text-base font-bold\">Total paid</span>\n      <span class=\"text-xl font-bold text-emerald-600\">$239.76</span>\n    </div>\n  </div>\n  <div class=\"flex items-center justify-center pt-10\">\n    <span class=\"text-xs text-slate-400\">Thank you for your order · Questions? Contact support at Juniper Store</span>\n  </div>\n</div>",
  "options": {
    "format": "pdf",
    "dimensions": "a4",
    "scale": 2
  }
}' \
  --output render.png
Fork this template to my account →

One click. Free tier includes 1 saved template.

More document templates