Certificate of Completion
documenttailwindpng

Certificate of Completion

Instantly generate personalised certificates on course completion, no manual design needed.

Request body
{
  "type": "tailwind",
  "content": "<div class=\"flex h-full w-full bg-slate-50 p-6\">\n  <div class=\"flex h-full w-full flex-col items-center justify-between border-2 border-emerald-600 bg-white p-10\">\n    <div class=\"flex flex-col items-center\">\n      <div class=\"flex items-center\">\n        <span class=\"text-xl font-bold text-slate-900\">AURORA</span>\n        <span class=\"ml-3 text-xl font-bold text-emerald-600\">ACADEMY</span>\n      </div>\n      <span class=\"mt-4 text-xs font-medium uppercase text-slate-400\">Certificate of Completion</span>\n    </div>\n    <div class=\"flex flex-col items-center\">\n      <span class=\"text-base text-slate-400\">This certifies that</span>\n      <span class=\"mt-5 text-7xl font-bold text-slate-900\" style=\"line-height:1.1;\">Amara Okafor</span>\n      <span class=\"mt-5 text-base text-slate-500\">has successfully completed</span>\n      <span class=\"mt-2 text-2xl font-bold text-emerald-700\">Advanced Product Analytics</span>\n      <span class=\"mt-1 text-sm text-slate-400\">Cohort 12 · 48 hours of instruction</span>\n      <div class=\"mt-6 flex items-center rounded-full bg-emerald-600 px-8 py-2\">\n        <span class=\"text-sm font-bold text-white\">AWARDED WITH DISTINCTION</span>\n      </div>\n    </div>\n    <div class=\"flex w-full items-end justify-between\">\n      <div class=\"flex flex-col items-center\">\n        <span class=\"text-sm font-semibold text-slate-900\">July 12, 2026</span>\n        <span class=\"mt-2 text-xs text-slate-400\">DATE ISSUED</span>\n      </div>\n      <div class=\"flex h-20 w-20 flex-col items-center justify-center rounded-full border-2 border-emerald-600 bg-emerald-50\">\n        <span class=\"text-xs font-bold text-emerald-800\">AURORA</span>\n        <span class=\"mt-1 text-xs font-bold text-emerald-800\">CERT</span>\n      </div>\n      <div class=\"flex flex-col items-center\">\n        <span class=\"text-sm font-semibold text-slate-900\">Dr. Lena Fischer</span>\n        <span class=\"mt-2 text-xs text-slate-400\">PROGRAM DIRECTOR</span>\n      </div>\n    </div>\n  </div>\n</div>",
  "options": {
    "format": "png",
    "dimensions": {
      "width": 1100,
      "height": 780
    },
    "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 bg-slate-50 p-6\">\n  <div class=\"flex h-full w-full flex-col items-center justify-between border-2 border-emerald-600 bg-white p-10\">\n    <div class=\"flex flex-col items-center\">\n      <div class=\"flex items-center\">\n        <span class=\"text-xl font-bold text-slate-900\">AURORA</span>\n        <span class=\"ml-3 text-xl font-bold text-emerald-600\">ACADEMY</span>\n      </div>\n      <span class=\"mt-4 text-xs font-medium uppercase text-slate-400\">Certificate of Completion</span>\n    </div>\n    <div class=\"flex flex-col items-center\">\n      <span class=\"text-base text-slate-400\">This certifies that</span>\n      <span class=\"mt-5 text-7xl font-bold text-slate-900\" style=\"line-height:1.1;\">Amara Okafor</span>\n      <span class=\"mt-5 text-base text-slate-500\">has successfully completed</span>\n      <span class=\"mt-2 text-2xl font-bold text-emerald-700\">Advanced Product Analytics</span>\n      <span class=\"mt-1 text-sm text-slate-400\">Cohort 12 · 48 hours of instruction</span>\n      <div class=\"mt-6 flex items-center rounded-full bg-emerald-600 px-8 py-2\">\n        <span class=\"text-sm font-bold text-white\">AWARDED WITH DISTINCTION</span>\n      </div>\n    </div>\n    <div class=\"flex w-full items-end justify-between\">\n      <div class=\"flex flex-col items-center\">\n        <span class=\"text-sm font-semibold text-slate-900\">July 12, 2026</span>\n        <span class=\"mt-2 text-xs text-slate-400\">DATE ISSUED</span>\n      </div>\n      <div class=\"flex h-20 w-20 flex-col items-center justify-center rounded-full border-2 border-emerald-600 bg-emerald-50\">\n        <span class=\"text-xs font-bold text-emerald-800\">AURORA</span>\n        <span class=\"mt-1 text-xs font-bold text-emerald-800\">CERT</span>\n      </div>\n      <div class=\"flex flex-col items-center\">\n        <span class=\"text-sm font-semibold text-slate-900\">Dr. Lena Fischer</span>\n        <span class=\"mt-2 text-xs text-slate-400\">PROGRAM DIRECTOR</span>\n      </div>\n    </div>\n  </div>\n</div>",
  "options": {
    "format": "png",
    "dimensions": {
      "width": 1100,
      "height": 780
    },
    "scale": 2
  }
}' \
  --output render.png
Fork this template to my account →

One click. Free tier includes 1 saved template.

More document templates