JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div>
  <header class="text-right padding-v12">
    <img src="https://res.cloudinary.com/mercavus-production/image/upload/assets/logo.png" width="135" alt="mercavus" />
  </header>
  <div class="address text-right">
    mercavus GmbH<br/>
    Chausseestr. 60<br/>
    10115 Berlin<br/>
    Germany
  </div>
  <div class="padding-v12">
    <table class="info">
      <tbody>
        <tr>
          <td style="width: 50%">
            <p>
              Customer Shop Name
            </p>
            <p>
              Customer First, Last Name
            </p>
            <p>
              Address line 1
            </p>
            <p>
              Address line 2
            </p>
            <p>
              ZIP_code City</p>
            <p>
              Country
            </p>
          </td>
          <td class="text-right" style="width: 50%">
            <p>
              Pro-Forma Invoice No: [order_no]
            </p>
            <p>
              Invoice date: [todays_date]
            </p>
            <p>
              Reference: [maker_name]
            </p>
            <p>
              Currency: [currency_code]
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="order-no padding-v24">
    Pro-Forma Invoice [order_no]
  </div>
  <table class="data">
    <thead>
      <tr>
        <th>Pros.</th>
        <th class="text-left">Description</th>
        <th>SKU</th>
        <th>Quantity</th>
        <th class="text-right">Unit Price</th>
        <th class="text-right">Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td class="text-left">Blue Candle - Small</td>
        <td>#BCS1</td>
        <td>2</td>
        <td class="text-right">€ 4,50</td>
        <td class="text-right">€ 9,00</td>
      </tr>
      <tr>
        <td>2</td>
        <td class="text-left">Red Candle - Large</td>
        <td>#RCL1</td>
        <td>5</td>
        <td class="text-right">€ 7,20</td>
        <td...

CSS

p {
  margin: 0;
}

table {
  width: 100%;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.padding-v12 {
  padding: 12px 0;
}

.padding-v24 {
  padding: 24px 0;
}

div.doc {
  max-width: 596px;
  margin: 0 auto;
}

header {
  border-bottom: 1px solid #ccc;
}

div.address {
  padding-top: 24px;
}

div.order-no {
  font-size: 20px;
  font-weight: 700;
}

table.data {
  border: 1px solid #ccc;
  border-collapse: collapse;
}

table.data td,
table.data th {
  text-align: center;
  padding: 8px 6px;
  border-bottom: 1px solid #ccc;
}

table.data th,
table.data tr.divider {
  background-color: #eee;
}

table.data tr.strong {
  font-weight: 700;
}

table.data tr.divider {
  height: 32px;
}

table.data td {
  font-size: 14px;
}

div.summary {
  font-size: 16px;
}

table.imprint {
  color: #999;
  font-size: 12px;
}