Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.doczilla.app/llms.txt

Use this file to discover all available pages before exploring further.

From contracts and invoices to social media banners, leverage our the htmlTemplate option for swift document generation. The htmlTemplate uses Handlebars to render your HTML together with the provided templateData. See Templating for more info.

​
Example

This example generates an invoice PDF using Tailwind CSS. 
curl --request POST 'https://api.doczilla.app/v1/pdf' \
  --header 'Authorization: Bearer <your token>' \
  --header 'Content-Type: application/json' \
  --output 'doczilla.pdf' \
  --data '{
    "pdf": {
      "format": "a4"
    },
    "page": {
      "htmlTemplate": "PGh0bWwgbGFuZz0iZW4iIGNsYXNzPSIiPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CgogIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDxzY3JpcHQ+CiAgICB0YWlsd2luZC5jb25maWcgPSB7CiAgICAgIHRoZW1lOiB7CiAgICAgICAgZXh0ZW5kOiB7CiAgICAgICAgICBjb2xvcnM6IHt9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgPC9zY3JpcHQ+CjwvaGVhZD4KCjxib2R5Pgo8ZGl2IGNsYXNzPSJtYXgtdy01eGwgbXgtYXV0byBiZy13aGl0ZSI+CiAgPGFydGljbGUgY2xhc3M9Im92ZXJmbG93LWhpZGRlbiI+CiAgICA8ZGl2IGNsYXNzPSJiZy1bd2hpdGVdIHJvdW5kZWQtYi1tZCI+CiAgICAgIDxkaXYgY2xhc3M9InAtOSI+CiAgICAgICAgPGRpdiBjbGFzcz0ic3BhY2UteS02IHRleHQtc2xhdGUtNzAwIj4KICAgICAgICAgIDxpbWcgY2xhc3M9Im9iamVjdC1jb3ZlciBoLTEyIgogICAgICAgICAgICAgICBzcmM9Imh0dHBzOi8vYXNzZXRzLmRvY3ppbGxhLmFwcC9leGFtcGxlcy9pbnZvaWNlLWV4YW1wbGUtbG9nby5wbmciPgoKICAgICAgICAgIDxwIGNsYXNzPSJ0ZXh0LXhsIGZvbnQtZXh0cmFib2xkIHRyYWNraW5nLXRpZ2h0IHVwcGVyY2FzZSBmb250LWJvZHkiPgogICAgICAgICAgICBEb2N6aWxsYSBleGFtcGxlCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJwLTkiPgogICAgICAgIDxkaXYgY2xhc3M9ImZsZXggdy1mdWxsIj4KICAgICAgICAgIDxkaXYgY2xhc3M9ImdyaWQgZ3JpZC1jb2xzLTQgZ2FwLTEyIj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0idGV4dC1zbSBmb250LWxpZ2h0IHRleHQtc2xhdGUtNTAwIj4KICAgICAgICAgICAgICA8cCBjbGFzcz0idGV4dC1zbSBmb250LW5vcm1hbCB0ZXh0LXNsYXRlLTcwMCI+CiAgICAgICAgICAgICAgICBJbnZvaWNlIERldGFpbDoKICAgICAgICAgICAgICA8L3A+CiAgICAgICAgICAgICAgPHA+RG9jemlsbGEgZXhhbXBsZTwvcD4KICAgICAgICAgICAgICA8cD5GYWtlIFN0cmVldCAxMjM8L3A+CiAgICAgICAgICAgICAgPHA+QW1zdGVyZGFtPC9wPgogICAgICAgICAgICAgIDxwPjQzMjEgQUE8L3A+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbGlnaHQgdGV4dC1zbGF0ZS01MDAiPgogICAgICAgICAgICAgIDxwIGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtc2xhdGUtNzAwIj5CaWxsZWQgVG88L3A+CiAgICAgICAgICAgICAgPHA+e3sgZGVidG9yLm5hbWUgfX08L3A+CiAgICAgICAgICAgICAgPHA+e3sgZGVidG9yLmFkZHJlc3MgfX08L3A+CiAgICAgICAgICAgICAgPHA+e3sgZGVidG9yLmNpdHkgfX08L3A+CiAgICAgICAgICAgICAgPHA+e3sgZGVidG9yLnppcGNvZGUgfX08L3A+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbGlnaHQgdGV4dC1zbGF0ZS01MDAiPgogICAgICAgICAgICAgIDxwIGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtc2xhdGUtNzAwIj5JbnZvaWNlIE51bWJlcjwvcD4KICAgICAgICAgICAgICA8cD57eyBudW1iZXIgfX08L3A+CgogICAgICAgICAgICAgIDxwIGNsYXNzPSJtdC0yIHRleHQtc20gZm9udC1ub3JtYWwgdGV4dC1zbGF0ZS03MDAiPgogICAgICAgICAgICAgICAgRGF0ZSBvZiBJc3N1ZQogICAgICAgICAgICAgIDwvcD4KICAgICAgICAgICAgICA8cD4KICAgICAgICAgICAgICAgIHt7IGRhdGUgfX0KICAgICAgICAgICAgICA8L3A+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbGlnaHQgdGV4dC1zbGF0ZS01MDAiPgogICAgICAgICAgICAgIDxwIGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtc2xhdGUtNzAwIj5UZXJtczwvcD4KICAgICAgICAgICAgICA8cD57eyB0ZXJtcyB9fSBEYXlzPC9wPgoKICAgICAgICAgICAgICA8cCBjbGFzcz0ibXQtMiB0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtc2xhdGUtNzAwIj5EdWU8L3A+CiAgICAgICAgICAgICAgPHA+e3sgZHVlRGF0ZSB9fTwvcD4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJwLTkiPgogICAgICAgIDxkaXYgY2xhc3M9ImZsZXggZmxleC1jb2wgbXgtMCBtdC04Ij4KICAgICAgICAgIDx0YWJsZSBjbGFzcz0ibWluLXctZnVsbCBkaXZpZGUteSBkaXZpZGUtc2xhdGUtNTAwIj4KICAgICAgICAgICAgPHRoZWFkPgogICAgICAgICAgICA8dHI+CiAgICAgICAgICAgICAgPHRoIHNjb3BlPSJjb2wiIGNsYXNzPSJweS0zLjUgcGwtNCBwci0zIHRleHQtbGVmdCB0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtc2xhdGUtNzAwIHNtOnBsLTYgbWQ6cGwtMCI+CiAgICAgICAgICAgICAgICBEZXNjcmlwdGlvbgogICAgICAgICAgICAgIDwvdGg+CiAgICAgICAgICAgICAgPHRoIHNjb3BlPSJjb2wiIGNsYXNzPSJoaWRkZW4gcHktMy41IHB4LTMgdGV4dC1yaWdodCB0ZXh0LXNtIGZvbnQtbm9ybWFsIHRleHQtc2xhdGUtNzAwIHNtOnRhYmxlLWNlbGwiPgogICAgICAgICAgICAgICAgUXVhbnRpdHkKICAgICAgICAgICAgICA8L3RoPgogICAgICAgICAgICAgIDx0aCBzY29wZT0iY29sIiBjbGFzcz0iaGlkZGVuIHB5LTMuNSBweC0zIHRleHQtcmlnaHQgdGV4dC1zbSBmb250LW5vcm1hbCB0ZXh0LXNsYXRlLTcwMCBzbTp0YWJsZS1jZWxsIj4KICAgICAgICAgICAgICAgIFJhdGUKICAgICAgICAgICAgICA8L3RoPgogICAgICAgICAgICAgIDx0aCBzY29wZT0iY29sIiBjbGFzcz0icHktMy41IHBsLTMgcHItNCB0ZXh0LXJpZ2h0IHRleHQtc20gZm9udC1ub3JtYWwgdGV4dC1zbGF0ZS03MDAgc206cHItNiBtZDpwci0wIj4KICAgICAgICAgICAgICAgIEFtb3VudAogICAgICAgICAgICAgIDwvdGg+CiAgICAgICAgICAgIDwvdHI+CiAgICAgICAgICAgIDwvdGhlYWQ+CiAgICAgICAgICAgIDx0Ym9keT4KICAgICAgICAgICAge3sjZWFjaCBsaW5lc319CiAgICAgICAgICAgIDx0ciBjbGFzcz0iYm9yZGVyLWIgYm9yZGVyLXNsYXRlLTIwMCI+CiAgICAgICAgICAgICAgPHRkIGNsYXNzPSJweS00IHBsLTQgcHItMyB0ZXh0LXNtIHNtOnBsLTYgbWQ6cGwtMCI+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJmb250LW1lZGl1bSB0ZXh0LXNsYXRlLTcwMCI+e3sgZGVzY3JpcHRpb24gfX08L2Rpdj4KICAgICAgICAgICAgICA8L3RkPgogICAgICAgICAgICAgIDx0ZCBjbGFzcz0iaGlkZGVuIHB4LTMgcHktNCB0ZXh0LXNtIHRleHQtcmlnaHQgdGV4dC1zbGF0ZS01MDAgc206dGFibGUtY2VsbCI+CiAgICAgICAgICAgICAgICB7eyBxdWFudGl0eSB9fQogICAgICAgICAgICAgIDwvdGQ+CiAgICAgICAgICAgICAgPHRkIGNsYXNzPSJoaWRkZW4gcHgtMyBweS00IHRleHQtc20gdGV4dC1yaWdodCB0ZXh0LXNsYXRlLTUwMCBzbTp0YWJsZS1jZWxsIj4KICAgICAgICAgICAgICAgIHt7IHJhdGUgfX0KICAgICAgICAgICAgICA8L3RkPgogICAgICAgICAgICAgIDx0ZCBjbGFzcz0icHktNCBwbC0zIHByLTQgdGV4dC1zbSB0ZXh0LXJpZ2h0IHRleHQtc2xhdGUtNTAwIHNtOnByLTYgbWQ6cHItMCI+CiAgICAgICAgICAgICAgICAke3sgYW1vdW50IH19CiAgICAgICAgICAgICAgPC90ZD4KICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAge3svZWFjaH19CiAgICAgICAgICAgIDwvdGJvZHk+CiAgICAgICAgICAgIDx0Zm9vdD4KICAgICAgICAgICAgPHRyPgogICAgICAgICAgICAgIDx0aCBzY29wZT0icm93IiBjb2xzcGFuPSIzIgogICAgICAgICAgICAgICAgICBjbGFzcz0iaGlkZGVuIHB0LTYgcGwtNiBwci0zIHRleHQtc20gZm9udC1saWdodCB0ZXh0LXJpZ2h0IHRleHQtc2xhdGUtNTAwIHNtOnRhYmxlLWNlbGwgbWQ6cGwtMCI+CiAgICAgICAgICAgICAgICBTdWJ0b3RhbAogICAgICAgICAgICAgIDwvdGg+CiAgICAgICAgICAgICAgPHRkIGNsYXNzPSJwdC02IHBsLTMgcHItNCB0ZXh0LXNtIHRleHQtcmlnaHQgdGV4dC1zbGF0ZS01MDAgc206cHItNiBtZDpwci0wIj4KICAgICAgICAgICAgICAgICR7eyBzdWJ0b3RhbCB9fQogICAgICAgICAgICAgIDwvdGQ+CiAgICAgICAgICAgIDwvdHI+CiAgICAgICAgICAgIHt7I2lmIGRpc2NvdW50fX0KICAgICAgICAgICAgPHRyPgogICAgICAgICAgICAgIDx0aCBzY29wZT0icm93IiBjb2xzcGFuPSIzIgogICAgICAgICAgICAgICAgICBjbGFzcz0iaGlkZGVuIHB0LTYgcGwtNiBwci0zIHRleHQtc20gZm9udC1saWdodCB0ZXh0LXJpZ2h0IHRleHQtc2xhdGUtNTAwIHNtOnRhYmxlLWNlbGwgbWQ6cGwtMCI+CiAgICAgICAgICAgICAgICBEaXNjb3VudAogICAgICAgICAgICAgIDwvdGg+CiAgICAgICAgICAgICAgPHRkIGNsYXNzPSJwdC02IHBsLTMgcHItNCB0ZXh0LXNtIHRleHQtcmlnaHQgdGV4dC1zbGF0ZS01MDAgc206cHItNiBtZDpwci0wIj4KICAgICAgICAgICAgICAgICR7eyBkaXNjb3VudCB9fQogICAgICAgICAgICAgIDwvdGQ+CiAgICAgICAgICAgIDwvdHI+CiAgICAgICAgICAgIHt7L2lmfX0KICAgICAgICAgICAgPHRyPgogICAgICAgICAgICAgIDx0aCBzY29wZT0icm93IiBjb2xzcGFuPSIzIgogICAgICAgICAgICAgICAgICBjbGFzcz0iaGlkZGVuIHB0LTQgcGwtNiBwci0zIHRleHQtc20gZm9udC1saWdodCB0ZXh0LXJpZ2h0IHRleHQtc2xhdGUtNTAwIHNtOnRhYmxlLWNlbGwgbWQ6cGwtMCI+CiAgICAgICAgICAgICAgICBUYXgKICAgICAgICAgICAgICA8L3RoPgogICAgICAgICAgICAgIDx0ZCBjbGFzcz0icHQtNCBwbC0zIHByLTQgdGV4dC1zbSB0ZXh0LXJpZ2h0IHRleHQtc2xhdGUtNTAwIHNtOnByLTYgbWQ6cHItMCI+CiAgICAgICAgICAgICAgICAke3sgdGF4IH19CiAgICAgICAgICAgICAgPC90ZD4KICAgICAgICAgICAgPC90cj4KICAgICAgICAgICAgPHRyPgogICAgICAgICAgICAgIDx0aCBzY29wZT0icm93IiBjb2xzcGFuPSIzIgogICAgICAgICAgICAgICAgICBjbGFzcz0iaGlkZGVuIHB0LTQgcGwtNiBwci0zIHRleHQtc20gZm9udC1ub3JtYWwgdGV4dC1yaWdodCB0ZXh0LXNsYXRlLTcwMCBzbTp0YWJsZS1jZWxsIG1kOnBsLTAiPgogICAgICAgICAgICAgICAgVG90YWwKICAgICAgICAgICAgICA8L3RoPgogICAgICAgICAgICAgIDx0ZCBjbGFzcz0icHQtNCBwbC0zIHByLTQgdGV4dC1zbSBmb250LW5vcm1hbCB0ZXh0LXJpZ2h0IHRleHQtc2xhdGUtNzAwIHNtOnByLTYgbWQ6cHItMCI+CiAgICAgICAgICAgICAgICAke3sgdG90YWwgfX0KICAgICAgICAgICAgICA8L3RkPgogICAgICAgICAgICA8L3RyPgogICAgICAgICAgICA8L3Rmb290PgogICAgICAgICAgPC90YWJsZT4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CgogICAgICA8ZGl2IGNsYXNzPSJtdC0xMCBwLTkiPgogICAgICAgIDxkaXYgY2xhc3M9ImJvcmRlci10IHB0LTkgYm9yZGVyLXNsYXRlLTIwMCI+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0LXNtIGZvbnQtbGlnaHQgdGV4dC1zbGF0ZS03MDAiPgogICAgICAgICAgICA8cD4KICAgICAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBOYW0gc2l0IGFtZXQgbGFjaW5pYSBwdXJ1cy4gVml2YW11cyBxdWlzCiAgICAgICAgICAgICAgdWx0cmljZXMgbGVvLiBQZWxsZW50ZXNxdWUgZWdldCB2b2x1dHBhdCBudWxsYS4gRXRpYW0gb3JjaSBtZXR1cywgcmhvbmN1cyB2ZWwgcHVydXMgaW4sIGNvbnZhbGxpcwogICAgICAgICAgICAgIGZyaW5naWxsYSB1cm5hLiBBbGlxdWFtIGFjIGFudGUgbW9sbGlzLCBhdWN0b3Igb2RpbyBhYywgZmV1Z2lhdCBuaXNsLgogICAgICAgICAgICA8L3A+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2FydGljbGU+CjwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4K",
      "templateData": {
        "number": "2024.0001",
        "date": "01-01-2024",
        "dueDate": "14-01-2024",
        "terms": 14,
        "subtotal": "1050.39",
        "tax": "0",
        "total": "1050.39",
        "debtor": {
          "name": "John Doe",
          "address": "Other fake street 3",
          "city": "Rotterdam",
          "zipcode": "1234 BB"
        },
        "lines": [
          {
            "description": "Tesla Truck",
            "quantity": 1,
            "rate": "550.49",
            "amount": "550.49"
          },
          {
            "description": "Tesla Charging Station",
            "quantity": 10,
            "rate": "49.99",
            "amount": "499.90"
          }
        ]
      }
    }
  }'

​
HTML

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Invoice {{ number }}</title>
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>
        <div class="max-w-5xl mx-auto bg-white">
            <article class="overflow-hidden">
                <div class="bg-[white] rounded-b-md">
                    <div class="p-9">
                        <div class="space-y-6 text-slate-700">
                            <img class="object-cover h-12"
                                 src="https://assets.doczilla.app/examples/invoice-example-logo.png">

                            <p class="text-xl font-extrabold tracking-tight uppercase font-body">
                                Doczilla example
                            </p>
                        </div>
                    </div>
                    <div class="p-9">
                        <div class="flex w-full">
                            <div class="grid grid-cols-4 gap-12">
                                <div class="text-sm font-light text-slate-500">
                                    <p class="text-sm font-normal text-slate-700">
                                        Invoice Detail:
                                    </p>
                                    <p>Doczilla example</p>
                                    <p>Fake Street 123</p>
                                    <p>Amsterdam</p>
                                    <p>4321 AA</p>
                                </div>
                                <div class="text-sm font-light text-slate-500">
                                    <p class="text-sm font-normal text-slate-700">Billed To</p>
                                    <p>{{ debtor.name }}</p>
                                    <p>{{ debtor.address }}</p>
                                    <p>{{ debtor.city }}</p>
                                    <p>{{ debtor.zipcode }}</p>
                                </div>
                                <div class="text-sm font-light text-slate-500">
                                    <p class="text-sm font-normal text-slate-700">Invoice Number</p>
                                    <p>{{ number }}</p>

                                    <p class="mt-2 text-sm font-normal text-slate-700">
                                        Date of Issue
                                    </p>
                                    <p>
                                        {{ date }}
                                    </p>
                                </div>
                                <div class="text-sm font-light text-slate-500">
                                    <p class="text-sm font-normal text-slate-700">Terms</p>
                                    <p>{{ terms }} Days</p>

                                    <p class="mt-2 text-sm font-normal text-slate-700">Due</p>
                                    <p>{{ dueDate }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="p-9">
                        <div class="flex flex-col mx-0 mt-8">
                            <table class="min-w-full divide-y divide-slate-500">
                                <thead>
                                    <tr>
                                        <th scope="col"
                                            class="py-3.5 pl-4 pr-3 text-left text-sm font-normal text-slate-700 sm:pl-6 md:pl-0">
                                            Description
                                        </th>
                                        <th scope="col"
                                            class="hidden py-3.5 px-3 text-right text-sm font-normal text-slate-700 sm:table-cell">
                                            Quantity
                                        </th>
                                        <th scope="col"
                                            class="hidden py-3.5 px-3 text-right text-sm font-normal text-slate-700 sm:table-cell">
                                            Rate
                                        </th>
                                        <th scope="col"
                                            class="py-3.5 pl-3 pr-4 text-right text-sm font-normal text-slate-700 sm:pr-6 md:pr-0">
                                            Amount
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each lines}}
                                        <tr class="border-b border-slate-200">
                                            <td class="py-4 pl-4 pr-3 text-sm sm:pl-6 md:pl-0">
                                                <div class="font-medium text-slate-700">{{ description }}</div>
                                            </td>
                                            <td class="hidden px-3 py-4 text-sm text-right text-slate-500 sm:table-cell">
                                                {{ quantity }}
                                            </td>
                                            <td class="hidden px-3 py-4 text-sm text-right text-slate-500 sm:table-cell">
                                                {{ rate }}
                                            </td>
                                            <td class="py-4 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
                                                ${{ amount }}
                                            </td>
                                        </tr>
                                    {{/each}}
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th scope="row" colspan="3"
                                            class="hidden pt-6 pl-6 pr-3 text-sm font-light text-right text-slate-500 sm:table-cell md:pl-0">
                                            Subtotal
                                        </th>
                                        <td class="pt-6 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
                                            ${{ subtotal }}
                                        </td>
                                    </tr>
                                    {{#if discount}}
                                        <tr>
                                            <th scope="row" colspan="3"
                                                class="hidden pt-6 pl-6 pr-3 text-sm font-light text-right text-slate-500 sm:table-cell md:pl-0">
                                                Discount
                                            </th>
                                            <td class="pt-6 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
                                                ${{ discount }}
                                            </td>
                                        </tr>
                                    {{/if}}
                                    <tr>
                                        <th scope="row" colspan="3"
                                            class="hidden pt-4 pl-6 pr-3 text-sm font-light text-right text-slate-500 sm:table-cell md:pl-0">
                                            Tax
                                        </th>
                                        <td class="pt-4 pl-3 pr-4 text-sm text-right text-slate-500 sm:pr-6 md:pr-0">
                                            ${{ tax }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row" colspan="3"
                                            class="hidden pt-4 pl-6 pr-3 text-sm font-normal text-right text-slate-700 sm:table-cell md:pl-0">
                                            Total
                                        </th>
                                        <td class="pt-4 pl-3 pr-4 text-sm font-normal text-right text-slate-700 sm:pr-6 md:pr-0">
                                            ${{ total }}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <div class="mt-48 p-9">
                        <div class="border-t pt-9 border-slate-200">
                            <div class="text-sm font-light text-slate-700">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet lacinia purus.
                                    Vivamus quis
                                    ultrices leo. Pellentesque eget volutpat nulla. Etiam orci metus, rhoncus vel purus
                                    in, convallis
                                    fringilla urna. Aliquam ac ante mollis, auctor odio ac, feugiat nisl.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </body>
</html>

​
Output