# Headers

> Components for creating headers with different menu layouts and social icons.

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

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

## Header with centered menu

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-with-centered-menu

### Tailwind

```tsx
<Section className="my-[40px] px-[32px] py-[40px]">
  <Row>
    <Column align="center">
      <Img
        alt="React Email logo"
        height="42"
        src="/static/logo-without-background.png"
      />
    </Column>
  </Row>
  <Row className="mt-[40px]">
    <Column align="center">
      <table>
        <tr>
          <td className="px-[8px]">
            <Link className="text-gray-600 [text-decoration:none]" href="#">
              About
            </Link>
          </td>
          <td className="px-[8px]">
            <Link className="text-gray-600 [text-decoration:none]" href="#">
              Blog
            </Link>
          </td>
          <td className="px-[8px]">
            <Link className="text-gray-600 [text-decoration:none]" href="#">
              Company
            </Link>
          </td>
          <td className="px-[8px]">
            <Link className="text-gray-600 [text-decoration:none]" href="#">
              Features
            </Link>
          </td>
        </tr>
      </table>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section
  style={{
    paddingTop: 40,
    paddingBottom: 40,
    paddingLeft: 32,
    paddingRight: 32,
    marginTop: 40,
    marginBottom: 40,
  }}
>
  <Row>
    <Column align="center">
      <Img
        alt="React Email logo"
        height="42"
        src="/static/logo-without-background.png"
      />
    </Column>
  </Row>
  <Row style={{ marginTop: 40 }}>
    <Column align="center">
      <table>
        <tr>
          <td style={{ paddingRight: 8, paddingLeft: 8 }}>
            <Link
              href="#"
              style={{
                color: 'rgb(75,85,99)',
                textDecoration: 'none',
              }}
            >
              About
            </Link>
          </td>
          <td style={{ paddingRight: 8, paddingLeft: 8 }}>
            <Link
              href="#"
              style={{
                color: 'rgb(75,85,99)',
                textDecoration: 'none',
              }}
            >
              Blog
            </Link>
          </td>
          <td style={{ paddingRight: 8, paddingLeft: 8 }}>
            <Link
              href="#"
              style={{
                color: 'rgb(75,85,99)',
                textDecoration: 'none',
              }}
            >
              Company
            </Link>
          </td>
          <td style={{ paddingRight: 8, paddingLeft: 8 }}>
            <Link
              href="#"
              style={{
                color: 'rgb(75,85,99)',
                textDecoration: 'none',
              }}
            >
              Features
            </Link>
          </td>
        </tr>
      </table>
    </Column>
  </Row>
</Section>
```

## Header with side menu

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-with-side-menu

### Tailwind

```tsx
<Section className="my-[40px] px-[32px] py-[40px]">
  <Row>
    <Column className="w-[80%]">
      <Img
        alt="React Email logo"
        height="42"
        src="/static/logo-without-background.png"
      />
    </Column>
    <Column align="right">
      <Row align="right">
        <Column className="px-[8px]">
          <Link className="text-gray-600 [text-decoration:none]" href="#">
            About
          </Link>
        </Column>
        <Column className="px-[8px]">
          <Link className="text-gray-600 [text-decoration:none]" href="#">
            Company
          </Link>
        </Column>
        <Column className="px-[8px]">
          <Link className="text-gray-600 [text-decoration:none]" href="#">
            Blog
          </Link>
        </Column>
      </Row>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section
  style={{
    paddingTop: 40,
    paddingBottom: 40,
    paddingLeft: 32,
    paddingRight: 32,
    marginTop: 40,
    marginBottom: 40,
  }}
>
  <Row>
    <Column style={{ width: '80%' }}>
      <Img
        alt="React Email logo"
        height="42"
        src="/static/logo-without-background.png"
      />
    </Column>
    <Column align="right">
      <Row align="right">
        <Column style={{ paddingLeft: 8, paddingRight: 8 }}>
          <Link
            href="#"
            style={{ color: 'rgb(75,85,99)', textDecoration: 'none' }}
          >
            About
          </Link>
        </Column>
        <Column style={{ paddingLeft: 8, paddingRight: 8 }}>
          <Link
            href="#"
            style={{ color: 'rgb(75,85,99)', textDecoration: 'none' }}
          >
            Company
          </Link>
        </Column>
        <Column style={{ paddingLeft: 8, paddingRight: 8 }}>
          <Link
            href="#"
            style={{ color: 'rgb(75,85,99)', textDecoration: 'none' }}
          >
            Blog
          </Link>
        </Column>
      </Row>
    </Column>
  </Row>
</Section>
```

## Header with social icons

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/header-with-social-icons

### Tailwind

```tsx
<Section className="px-[32px] py-[40px]">
  <Row>
    <Column className="w-[80%]">
      <Img
        alt="React Email logo"
        width="42"
        height="42"
        src="/static/logo-without-background.png"
      />
    </Column>
    <Column align="right">
      <Row align="right">
        <Column>
          <Link href="#">
            <Img
              alt="X"
              className="mx-[4px]"
              height="36"
              src="/static/x-logo.png"
              width="36"
            />
          </Link>
        </Column>
        <Column>
          <Link href="#">
            <Img
              alt="Instagram"
              className="mx-[4px]"
              height="36"
              src="/static/instagram-logo.png"
              width="36"
            />
          </Link>
        </Column>
        <Column>
          <Link href="#">
            <Img
              alt="Facebook"
              className="mx-[4px]"
              height="36"
              src="/static/facebook-logo.png"
              width="36"
            />
          </Link>
        </Column>
      </Row>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section
  style={{
    paddingTop: 40,
    paddingBottom: 40,
    paddingLeft: 32,
    paddingRight: 32,
  }}
>
  <Row>
    <Column style={{ width: '80%' }}>
      <Img
        alt="React Email logo"
        width="42"
        height="42"
        src="/static/logo-without-background.png"
      />
    </Column>
    <Column align="right">
      <Row align="right">
        <Column>
          <Link href="#">
            <Img
              alt="X"
              height="36"
              src="/static/x-logo.png"
              style={{
                marginLeft: 4,
                marginRight: 4,
              }}
              width="36"
            />
          </Link>
        </Column>
        <Column>
          <Link href="#">
            <Img
              alt="Instagram"
              height="36"
              src="/static/instagram-logo.png"
              style={{
                marginLeft: 4,
                marginRight: 4,
              }}
              width="36"
            />
          </Link>
        </Column>
        <Column>
          <Link href="#">
            <Img
              alt="Facebook"
              height="36"
              src="/static/facebook-logo.png"
              style={{ marginLeft: 4, marginRight: 4 }}
              width="36"
            />
          </Link>
        </Column>
      </Row>
    </Column>
  </Row>
</Section>
```