# Footers

> Footer components with various column layouts.

Web: https://react.email/components/footers

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Footer with one column

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/footer-with-one-column

### Tailwind

```tsx
<Section className="text-center">
  <table className="w-full">
    <tr className="w-full">
      <td align="center">
        <Img
          alt="React Email logo"
          height="42"
          src="/static/logo-without-background.png"
          width="42"
        />
      </td>
    </tr>
    <tr className="w-full">
      <td align="center">
        <Text className="my-[8px] font-semibold text-[16px] text-gray-900 leading-[24px]">
          Acme corporation
        </Text>
        <Text className="mt-[4px] mb-0 text-[16px] text-gray-500 leading-[24px]">
          Think different
        </Text>
      </td>
    </tr>
    <tr>
      <td align="center">
        <Row className="table-cell h-[44px] w-[56px] align-bottom">
          <Column className="pr-[8px]">
            <Link href="#">
              <Img
                alt="Facebook"
                height="36"
                src="/static/facebook-logo.png"
                width="36"
              />
            </Link>
          </Column>
          <Column className="pr-[8px]">
            <Link href="#">
              <Img alt="X" height="36" src="/static/x-logo.png" width="36" />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Instagram"
                height="36"
                src="/static/instagram-logo.png"
                width="36"
              />
            </Link>
          </Column>
        </Row>
      </td>
    </tr>
    <tr>
      <td align="center">
        <Text className="my-[8px] font-semibold text-[16px] text-gray-500 leading-[24px]">
          123 Main Street Anytown, CA 12345
        </Text>
        <Text className="mt-[4px] mb-0 font-semibold text-[16px] text-gray-500 leading-[24px]">
          mail@example.com +123456789
        </Text>
      </td>
    </tr>
  </table>
</Section>
```

### Inline styles

```tsx
<Section style={{ textAlign: 'center' }}>
  <table style={{ width: '100%' }}>
    <tr style={{ width: '100%' }}>
      <td align="center">
        <Img
          alt="React Email logo"
          height="42"
          src="/static/logo-without-background.png"
          width="42"
        />
      </td>
    </tr>
    <tr style={{ width: '100%' }}>
      <td align="center">
        <Text
          style={{
            marginTop: 8,
            marginBottom: 8,
            fontSize: 16,
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(17,24,39)',
          }}
        >
          Acme corporation
        </Text>
        <Text
          style={{
            marginTop: 4,
            marginBottom: '0px',
            fontSize: 16,
            lineHeight: '24px',
            color: 'rgb(107,114,128)',
          }}
        >
          Think different
        </Text>
      </td>
    </tr>
    <tr>
      <td align="center">
        <Row
          style={{
            display: 'table-cell',
            height: 44,
            width: 56,
            verticalAlign: 'bottom',
          }}
        >
          <Column style={{ paddingRight: 8 }}>
            <Link href="#">
              <Img
                alt="Facebook"
                height="36"
                src="/static/facebook-logo.png"
                width="36"
              />
            </Link>
          </Column>
          <Column style={{ paddingRight: 8 }}>
            <Link href="#">
              <Img alt="X" height="36" src="/static/x-logo.png" width="36" />
            </Link>
          </Column>
          <Column>
            <Link href="#">
              <Img
                alt="Instagram"
                height="36"
                src="/static/instagram-logo.png"
                width="36"
              />
            </Link>
          </Column>
        </Row>
      </td>
    </tr>
    <tr>
      <td align="center">
        <Text
          style={{
            marginTop: 8,
            marginBottom: 8,
            fontSize: 16,
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(107,114,128)',
          }}
        >
          123 Main Street Anytown, CA 12345
        </Text>
        <Text
          style={{
            marginTop: 4,
            marginBottom: '0px',
            fontSize: 16,
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(107,114,128)',
          }}
        >
          mail@example.com +123456789
        </Text>
      </td>
    </tr>
  </table>
</Section>
```

## Footer with two columns

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/footer-with-two-columns

### Tailwind

```tsx
<Section>
  <Row>
    <Column colSpan={4}>
      <Img
        alt="React Email logo"
        height="42"
        src="/static/logo-without-background.png"
      />
      <Text className="my-[8px] font-semibold text-[16px] text-gray-900 leading-[24px]">
        Acme corporation
      </Text>
      <Text className="mt-[4px] mb-[0px] text-[16px] text-gray-500 leading-[24px]">
        Think different
      </Text>
    </Column>
    <Column align="left" className="table-cell align-bottom">
      <Row className="table-cell h-[44px] w-[56px] align-bottom">
        <Column className="pr-[8px]">
          <Link href="#">
            <Img
              alt="Facebook"
              height="36"
              src="/static/facebook-logo.png"
              width="36"
            />
          </Link>
        </Column>
        <Column className="pr-[8px]">
          <Link href="#">
            <Img alt="X" height="36" src="/static/x-logo.png" width="36" />
          </Link>
        </Column>
        <Column>
          <Link href="#">
            <Img
              alt="Instagram"
              height="36"
              src="/static/instagram-logo.png"
              width="36"
            />
          </Link>
        </Column>
      </Row>
      <Row>
        <Text className="my-[8px] font-semibold text-[16px] text-gray-500 leading-[24px]">
          123 Main Street Anytown, CA 12345
        </Text>
        <Text className="mt-[4px] mb-[0px] font-semibold text-[16px] text-gray-500 leading-[24px]">
          mail@example.com +123456789
        </Text>
      </Row>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section>
  <Row>
    <Column colSpan={4}>
      <Img
        alt="React Email logo"
        height="42"
        src="/static/logo-without-background.png"
      />
      <Text
        style={{
          marginTop: 8,
          marginBottom: 8,
          fontSize: 16,
          lineHeight: '24px',
          fontWeight: 600,
          color: 'rgb(17,24,39)',
        }}
      >
        Acme corporation
      </Text>
      <Text
        style={{
          marginTop: 4,
          marginBottom: '0px',
          fontSize: 16,
          lineHeight: '24px',
          color: 'rgb(107,114,128)',
        }}
      >
        Think different
      </Text>
    </Column>
    <Column
      align="left"
      style={{ display: 'table-cell', verticalAlign: 'bottom' }}
    >
      <Row
        style={{
          display: 'table-cell',
          height: 44,
          width: 56,
          verticalAlign: 'bottom',
        }}
      >
        <Column style={{ paddingRight: 8 }}>
          <Link href="#">
            <Img
              alt="Facebook"
              height="36"
              src="/static/facebook-logo.png"
              width="36"
            />
          </Link>
        </Column>
        <Column style={{ paddingRight: 8 }}>
          <Link href="#">
            <Img alt="X" height="36" src="/static/x-logo.png" width="36" />
          </Link>
        </Column>
        <Column>
          <Link href="#">
            <Img
              alt="Instagram"
              height="36"
              src="/static/instagram-logo.png"
              width="36"
            />
          </Link>
        </Column>
      </Row>
      <Row>
        <Text
          style={{
            marginTop: 8,
            marginBottom: 8,
            fontSize: 16,
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(107,114,128)',
          }}
        >
          123 Main Street Anytown, CA 12345
        </Text>
        <Text
          style={{
            marginTop: 4,
            marginBottom: '0px',
            fontSize: 16,
            lineHeight: '24px',
            fontWeight: 600,
            color: 'rgb(107,114,128)',
          }}
        >
          mail@example.com +123456789
        </Text>
      </Row>
    </Column>
  </Row>
</Section>
```