TemplatesReceipt / Invoice
Receipt / Invoice

ReceiptFinanceTransactional
Receipt
AMOUNT PAID
$1,024.00
import {
  Body,
  Container,
  Column,
  Head,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Text,
} from "@react-email/components";
import * as React from "react";

export const ReceiptEmail = () => (
  <Html>
    <Head />
    <Preview>Receipt for your order</Preview>
    <Body style={main}>
      <Container style={container}>
        <Section>
          <Row>
             <Column>
               <Img src="https://react.email/static/stripe-logo.png" width="40" height="40" alt="Stripe" />
             </Column>
             <Column align="right" style={tableCell}>
               <Text style={heading}>Receipt</Text>
             </Column>
          </Row>
        </Section>
        <Section style={informationTable}>
          <Row style={informationTableRow}>
            <Column colSpan={2}>
              <Text style={informationTableLabel}>AMOUNT PAID</Text>
              <Text style={informationTableValue}>$1,024.00</Text>
            </Column>
          </Row>
        </Section>
        <Hr style={walletBottomLine} />
        <Text style={footerCopyright}>
          © 2024 Mailbase Inc. All rights reserved.
        </Text>
      </Container>
    </Body>
  </Html>
);

const main = {
  fontFamily: '"Helvetica Neue",Helvetica,Arial,sans-serif',
  backgroundColor: "#f6f9fc",
};

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
  marginBottom: "64px",
};

const tableCell = {
  display: "table-cell",
};

const heading = {
  fontSize: "24px",
  fontWeight: "300",
  color: "#8898aa",
};

const informationTable = {
  borderCollapse: "collapse" as const,
  borderSpacing: "0px",
  color: "rgb(51,51,51)",
  backgroundColor: "rgb(250,250,250)",
  borderRadius: "3px",
  fontSize: "12px",
};

const informationTableRow = {
  height: "46px",
};

const informationTableLabel = {
  color: "rgb(102,102,102)",
  fontSize: "10px",
};

const informationTableValue = {
  fontSize: "12px",
  margin: "0",
  padding: "0",
  lineHeight: "1.4",
};

const walletBottomLine = {
  margin: "65px 0 20px 0",
  borderTop: "1px solid #dcdce6",
  borderColor: "#dcdce6",
};

const footerCopyright = {
  margin: "25px 0 0 0",
  textAlign: "center" as const,
  fontSize: "12px",
  color: "rgb(102,102,102)",
};