Responsive receipt email
A transactional receipt email with a meta row, line-item table, right-aligned totals and a mobile layout that stacks the header details.
Tailwind CSSEmailemailreceiptinvoicehtml
Live preview
Code
<!-- Receipt email: totals use a right-aligned table so amounts line up -->
<style>
@media only screen and (max-width: 560px) {
.box { width: 100% !important; }
.meta td { display: block !important; width: 100% !important; text-align: left !important; padding-bottom: 8px !important; }
}
</style>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f8fafc;">
<tr><td align="center" style="padding:24px 12px;font-family:Arial,Helvetica,sans-serif;">
<table role="presentation" class="box" width="560" cellpadding="0" cellspacing="0" border="0" style="width:560px;max-width:100%;background:#fff;border:1px solid #e2e8f0;border-radius:10px;">
<tr><td style="padding:28px 32px 8px;">
<h1 style="margin:0;font-size:22px;color:#0f172a;">Payment received</h1>
<p style="margin:6px 0 0;font-size:14px;color:#64748b;">Thank you, {{ customer_name }}. This is your receipt.</p>
</td></tr>
<tr><td style="padding:16px 32px;">
<table role="presentation" class="meta" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-size:13px;color:#475569;">
<tr>
<td>Receipt no.<br><strong style="color:#0f172a;">{{ number }}</strong></td>
<td>Date<br><strong style="color:#0f172a;">{{ date }}</strong></td>
<td align="right">Paid with<br><strong style="color:#0f172a;">Card ending {{ last4 }}</strong></td>
</tr>
</table>
</td></tr>
<tr><td style="padding:0 32px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="font-size:14px;color:#334155;">
<tr style="background:#f1f5f9;">
<th align="left" style="padding:10px 8px;font-size:12px;text-transform:uppercase;color:#64748b;">Item</th>
<th align="right" style="padding:10px 8px;font-size:12px;text-transform:uppercase;color:#64748b;">Qty</th>
<th align="right" style="padding:10px 8px;font-size:12px;text-transform:uppercase;color:#64748b;">Amount</th>
</tr>
<!-- Repeat this row in a loop -->
<tr>
<td style="padding:12px 8px;border-bottom:1px solid #e2e8f0;">Pro plan, monthly</td>
<td align="right" style="padding:12px 8px;border-bottom:1px solid #e2e8f0;">1</td>
<td align="right" style="padding:12px 8px;border-bottom:1px solid #e2e8f0;">$49.00</td>
</tr>
<tr>
<td style="padding:12px 8px;border-bottom:1px solid #e2e8f0;">Extra seats</td>
<td align="right" style="padding:12px 8px;border-bottom:1px solid #e2e8f0;">3</td>
<td align="right" style="padding:12px 8px;border-bottom:1px solid #e2e8f0;">$15.00</td>
</tr>
</table>
</td></tr>
<tr><td align="right" style="padding:12px 32px 4px;font-size:14px;color:#475569;">Tax (8%): $5.12</td></tr>
<tr><td align="right" style="padding:4px 32px 24px;font-size:20px;font-weight:bold;color:#0f172a;">Total paid $69.12</td></tr>
<tr><td style="padding:16px 32px;background:#f8fafc;border-top:1px solid #e2e8f0;border-radius:0 0 10px 10px;font-size:12px;color:#94a3b8;">
Questions about this charge? Reply to this message or visit example.com/help.
</td></tr>
</table>
</td></tr>
</table>
How it works
What it solves
Receipts are the most opened transactional email you send, and customers scan them for three things: what was paid, when, and the total. This layout puts those facts in predictable places and keeps numbers aligned in every mail client.
How it works
The body is a bordered card built from presentation tables. A meta row shows receipt number, date and payment method in three cells; on screens narrower than 560px the meta media query turns each cell into a full-width block so nothing wraps awkwardly. Line items live in a second table with a shaded header and align="right" on quantity and amount columns, which keeps decimals lined up without relying on CSS text-align inheritance. Totals sit in their own rows below, with the grand total in larger bold type so it is the first number the eye lands on.
Adapting it
- Loop over your order lines in your template engine and repeat the marked
<tr>. - Format money on the server and pass strings; do the arithmetic once, never in the template.
- Add a discount row between the items and tax rows when needed.
- Replace the footer line with your support route, and add a link to a hosted invoice page if you offer one.
Pitfalls
- Wrap long product names with
word-breakcarefully; some clients ignore it, so keep names short. - Never show the full card number, only the last four digits.
- Use a plain-text alternative part as well, since receipts are often archived by accounting tools.
- Keep currency symbols and tax labels localised, or totals can be misread.
How to use it
- Add the file as a view or provider template named for your receipt message.
- Move the
<style>block into the document<head>of the final email. - Replace the
{{ ... }}placeholders with your template variables. - Loop the commented item row over the order lines.
- Send the email with both HTML and plain-text parts and test on a phone.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.