Untitled

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Klassy Parcel Report</title>

    <style>
      * {
        font-family: "Inter", sans-serif;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      main {
        padding: 18px;
      }
      .report-head {
        background: #f5f5f5;
        padding: 12px 18px;
      }

      .report-head-p {
        font-size: 16px;
        font-weight: 500;
      }

      .report-div {
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
      }

      .report-div-p {
        font-size: 14px;
      }

      /* Table Styles */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 30px;
      }

      th {
        background: #f5f5f5;
        padding: 8px;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
      }

      tr {
        border-bottom: 1px solid #efefef;
      }

      .report-th {
        padding-left: 12px;
      }

      td {
        padding: 8px;
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <main>
      <!-- header part -->
      <div class="report-head">
        <p class="report-head-p">
          Klassy Missy | klassy.com.bd Shipped Parcel Report 07 July 2024
        </p>

        <div class="report-div">
          <p class="report-div-p">www.klassy.com.bd</p>
          <p class="report-div-p">Courier: Pathao</p>
        </div>
      </div>

      <!-- Report Table -->
      <table>
        <thead>
          <tr>
            <th class="report-th">#</th>
            <th>Customer Name</th>
            <th>Phone Number</th>
            <th>Order ID</th>
          </tr>
        </thead>
        <tbody>
          <!-- Sample Row -->
          <tr>
            <td class="report-th">1</td>
            <td>John Doe</td>
            <td>0123456789</td>
            <td>100001</td>
          </tr>

          <tr>
            <td class="report-th">1</td>
            <td>John Doe</td>
            <td>0123456789</td>
            <td>100001</td>
          </tr>
        </tbody>
      </table>
    </main>
  </body>
</html>