Install

import { Row, Column, Section } from "@react-email/components";

Logo align left

<Section>
  <Row>
    <Column 
      className="max-w-[32px]" 
      align="left" 
      width="32px"
    >
      <Img 
        src="<https://tinypic.host/images/2024/07/13/white-on-blue.png>" 
        width="32px"
      />
    </Column>
    <Column>
      <Heading 
        as="h2" 
        className="text-[20px] font-medium ml-2 text-blue-600"
      >
        MidnightUI
      </Heading>
    </Column>
  </Row>
</Section>

Logo align left with links

<Section>
  <Row>
    <Column 
    className="max-w-[32px]" 
    align="left" 
    width="32px">
      <Img 
      src="<https://tinypic.host/images/2024/07/13/white-on-blue.png>" 
      width="32px" />
    </Column>
    <Column>
      <Heading 
      as="h2" 
      className="text-[20px] font-medium ml-2 text-blue-600">
        MidnightUI
      </Heading>
    </Column>
    <Section>
      <Column>
        <Link 
        className="mr-5 text-black">
          Home
        </Link>
        <Link 
        className="mr-5 text-black">
          Products
        </Link>
        <Link 
        className="mr-5 text-black">
          Career
        </Link>
        <Link 
        className="mr-5 text-black">
          Support
        </Link>
      </Column>
    </Section>
  </Row>
</Section>

Logo align left button right

<Section>
  <Column>
    <Row 
    className="flex items-center">
      <Column 
      className="max-w-[32px]">
        <Img 
        src="<https://tinypic.host/images/2024/07/13/white-on-blue.png>" 
        width="32px" />
      </Column>
      <Column>
        <Heading 
        as="h2" 
        className="text-[20px] font-medium ml-2 text-blue-600">
          MidnightUI
        </Heading>
      </Column>
    </Row>
  </Column>
  <Column 
  className="min-w-full text-right">
    <Button 
    href="<https://example.com>" 
    className="bg-blue-600 text-white font-bold py-2 px-4 rounded">
      Get Started
    </Button>
  </Column>
</Section>

Logo align middle

<Section 
className="flex items-center justify-center align-middle">
  <Row>
    <Column 
    className="max-w-[32px]">
      <Img 
      src="<https://tinypic.host/images/2024/07/13/white-on-blue.png>" 
      width="32px" />
    </Column>
    <Column>
      <Heading 
      as="h2" 
      className="text-[20px] font-medium ml-2 text-blue-600">
        MidnightUI
      </Heading>
    </Column>
  </Row>
</Section>