Skip to main content
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

I