Skip to content
Orim Docs

Report PDF

Try this template in the editor →

Basic report structure

Section titled “Basic report structure”
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body class="bg-white">
  <!-- Cover page -->
  <div class="h-screen flex flex-col justify-center items-center bg-gradient-to-br from-indigo-600 to-purple-700 text-white p-8">
    <h1 class="text-5xl font-bold mb-4">Monthly Report</h1>
    <p class="text-xl text-indigo-200">January 2026</p>
    <p class="mt-8 text-indigo-300">Your Company Name</p>
  </div>


  <!-- Content pages -->
  <div class="p-8">
    <h2 class="text-2xl font-bold text-gray-900 mb-6">Executive Summary</h2>


    <!-- Stats grid -->
    <div class="grid grid-cols-3 gap-4 mb-8">
      <div class="bg-gray-50 rounded-lg p-4 text-center">
        <p class="text-3xl font-bold text-indigo-600">1,234</p>
        <p class="text-gray-500 text-sm">Total Users</p>
      </div>
      <div class="bg-gray-50 rounded-lg p-4 text-center">
        <p class="text-3xl font-bold text-green-600">+23%</p>
        <p class="text-gray-500 text-sm">Growth</p>
      </div>
      <div class="bg-gray-50 rounded-lg p-4 text-center">
        <p class="text-3xl font-bold text-purple-600">$12.4k</p>
        <p class="text-gray-500 text-sm">Revenue</p>
      </div>
    </div>


    <!-- Data table -->
    <h3 class="text-lg font-semibold text-gray-900 mb-4">Monthly Breakdown</h3>
    <table class="w-full">
      <thead>
        <tr class="bg-gray-50">
          <th class="text-left p-3 text-gray-600">Month</th>
          <th class="text-right p-3 text-gray-600">Users</th>
          <th class="text-right p-3 text-gray-600">Revenue</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b">
          <td class="p-3">October</td>
          <td class="p-3 text-right">892</td>
          <td class="p-3 text-right">$8,200</td>
        </tr>
        <tr class="border-b">
          <td class="p-3">November</td>
          <td class="p-3 text-right">1,045</td>
          <td class="p-3 text-right">$10,100</td>
        </tr>
        <tr class="border-b">
          <td class="p-3 font-semibold">December</td>
          <td class="p-3 text-right font-semibold">1,234</td>
          <td class="p-3 text-right font-semibold">$12,400</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Page breaks

Section titled “Page breaks”

Use break-before or break-after for page breaks:

<div class="break-after-page">
  <!-- This content will be on page 1 -->
</div>


<div>
  <!-- This content will start on page 2 -->
</div>
Section titled “Print-specific styles”
<style>
  @media print {
    .no-print { display: none; }
    .page { page-break-after: always; }
  }
</style>