Headers email templates

With social icons

import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Tailwind,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const Articles = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Articles</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-neutral-200 bg-white px-8">
            <Section className="py-10">
              <Row>
                <Column className="w-[80%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
                <Column align="right">
                  <Row align="right">
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/facebook-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/twitter-logo.png`}
                          width="36"
                          height="36"
                          className="mx-1"
                        />
                      </Link>
                    </Column>
                    <Column>
                      <Link href="#">
                        <Img
                          src={`${baseUrl}/instagram-logo.png`}
                          width="36"
                          height="36"
                          className="ml-1"
                        />
                      </Link>
                    </Column>
                  </Row>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default Articles

With menu right

import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Tailwind,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const WithMenuRight = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>Articles</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white px-8">
            <Section className="py-10">
              <Row>
                <Column className="w-[80%]">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
                <Column align="right">
                  <Row align="right">
                    <Column>
                      <Link
                        className="mx-2 text-gray-600 no-underline"
                        href="#"
                      >
                        About
                      </Link>
                    </Column>
                    <Column>
                      <Link
                        className="mx-2 text-gray-600 no-underline"
                        href="#"
                      >
                        Company
                      </Link>
                    </Column>
                    <Column>
                      <Link
                        className="mx-2 text-gray-600 no-underline"
                        href="#"
                      >
                        Blog
                      </Link>
                    </Column>
                  </Row>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default WithMenuRight

With menu centered

Preview

Unlock code

import {
  Body,
  Column,
  Container,
  Font,
  Head,
  Html,
  Img,
  Link,
  Preview,
  Row,
  Section,
  Tailwind,
} from '@react-email/components'
import * as React from 'react'

// Download the asset and use your own base url here
const baseUrl = 'https://www.reactemailtemplate.com/'

export const WithMenuCentered = () => {
  return (
    <Html>
      <Head>
        <Font
          fontFamily="Inter"
          fallbackFontFamily="Helvetica"
          webFont={{
            url: 'https://fonts.googleapis.com/css2?family=Inter&display=swap',
            format: 'woff2',
          }}
          fontWeight={400}
          fontStyle="normal"
        />
      </Head>
      <Preview>WithMenuCentered</Preview>
      <Tailwind>
        <Body className="mx-auto my-auto bg-white font-sans text-gray-900 antialiased">
          <Container className="mx-auto my-[40px] rounded border border-solid border-gray-200 bg-white px-8">
            <Section className="py-10">
              <Row>
                <Column align="center">
                  <Img
                    src={`${baseUrl}/company-logo.png`}
                    width="60"
                    height="42"
                    alt="company-logo"
                  />
                </Column>
              </Row>
              <Row className="mt-10">
                <Column align="center">
                  <Link className="mx-2 text-gray-600 no-underline" href="#">
                    About
                  </Link>
                  <Link className="mx-2 text-gray-600 no-underline" href="#">
                    Company
                  </Link>
                  <Link className="mx-2 text-gray-600 no-underline" href="#">
                    Blog
                  </Link>
                  <Link className="mx-2 text-gray-600 no-underline" href="#">
                    Contacts
                  </Link>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default WithMenuCentered