Open Graph Blog Card
socialtailwindpng

Open Graph Blog Card

Pixel-perfect 1200×630 social preview for blog posts. Drop in your title, author, and tag.

Request body
{
  "type": "tailwind",
  "content": "<div class=\"flex h-full w-full flex-col justify-between bg-zinc-900 p-16 text-white\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex items-center\">\n      <span class=\"text-xl font-bold text-white\">Aurora</span>\n      <span class=\"ml-2 text-xl font-medium text-emerald-400\">Blog</span>\n    </div>\n    <span class=\"rounded-full border border-emerald-500 px-4 py-1 text-sm font-medium text-emerald-400\">Product Update</span>\n  </div>\n  <div class=\"flex flex-col\">\n    <h1 class=\"text-6xl font-bold leading-tight\">Meet Aurora Insights — analytics your whole team can read</h1>\n    <p class=\"mt-4 text-2xl text-zinc-400\">Real-time funnels, cohort views, zero SQL.</p>\n  </div>\n  <div class=\"flex items-center justify-between\">\n    <span class=\"text-lg font-medium text-zinc-300\">By the Product Team</span>\n    <span class=\"text-lg text-zinc-500\">5 min read</span>\n  </div>\n</div>",
  "options": {
    "format": "png",
    "dimensions": "og-image",
    "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 justify-between bg-zinc-900 p-16 text-white\">\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex items-center\">\n      <span class=\"text-xl font-bold text-white\">Aurora</span>\n      <span class=\"ml-2 text-xl font-medium text-emerald-400\">Blog</span>\n    </div>\n    <span class=\"rounded-full border border-emerald-500 px-4 py-1 text-sm font-medium text-emerald-400\">Product Update</span>\n  </div>\n  <div class=\"flex flex-col\">\n    <h1 class=\"text-6xl font-bold leading-tight\">Meet Aurora Insights — analytics your whole team can read</h1>\n    <p class=\"mt-4 text-2xl text-zinc-400\">Real-time funnels, cohort views, zero SQL.</p>\n  </div>\n  <div class=\"flex items-center justify-between\">\n    <span class=\"text-lg font-medium text-zinc-300\">By the Product Team</span>\n    <span class=\"text-lg text-zinc-500\">5 min read</span>\n  </div>\n</div>",
  "options": {
    "format": "png",
    "dimensions": "og-image",
    "scale": 2
  }
}' \
  --output render.png
Fork this template to my account →

One click. Free tier includes 1 saved template.

More social templates