# Marketing

> Marketing components for creating surveys and checkout forms.

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

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

## Bento Grid

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/bento-grid

### Tailwind

```tsx
<Html>
  <Head />
  <Body>
    <Preview>Coffee Storage</Preview>
    <Container className="bg-white rounded-[8px] mx-auto max-w-[900px] overflow-hidden p-0">
      <Section>
        <Row className="bg-[rgb(41,37,36)] border-separate [border-spacing:24px] m-0 table-fixed w-full">
          <Column className="pl-[12px]">
            <Heading
              as="h1"
              className="text-white text-[28px] font-bold mb-[10px]"
            >
              Coffee Storage
            </Heading>
            <Text className="text-white/60 text-[14px] leading-[20px] m-0">
              Keep your coffee fresher for longer with innovative technology.
            </Text>
            <Link
              href="#"
              className="text-white/80 block text-[14px] leading-[20px] font-semibold mt-[12px] no-underline"
            >
              Shop now →
            </Link>
          </Column>
          <Column className="w-[42%] h-[250px]">
            <Img
              src="/static/coffee-bean-storage.jpg"
              alt="Coffee Bean Storage"
              className="rounded-[4px] h-full -mr-[6px] object-cover object-center w-full"
            />
          </Column>
        </Row>
      </Section>
      <Section className="mb-[24px]">
        <Row className="border-separate [border-spacing:12px] table-fixed w-full">
          {[
            {
              imageUrl: '/static/atmos-vacuum-canister.jpg',
              altText: 'Auto-Sealing Vacuum Canister',
              title: 'Auto-Sealing Vacuum Canister',
              description:
                'A container that automatically creates an airtight seal with a button press.',
              linkUrl: '#',
            },
            {
              imageUrl: '/static/vacuum-canister-clear-glass-bundle.jpg',
              altText: '3-Pack Vacuum Containers',
              title: '3-Pack Vacuum Containers',
              description:
                'Keep your coffee fresher for longer with this set of high-performance vacuum containers.',
              linkUrl: '#',
            },
          ].map((product) => (
            <Column key={product.title} className="mx-auto max-w-[180px]">
              <Img
                src={product.imageUrl}
                alt={product.altText}
                className="rounded-[4px] mb-[18px] w-full"
              />
              <div>
                <Heading
                  as="h2"
                  className="text-[14px] leading-[20px] font-bold mb-[8px]"
                >
                  {product.title}
                </Heading>
                <Text className="text-gray-500 text-[12px] leading-[20px] m-0 pr-[12px]">
                  {product.description}
                </Text>
              </div>
            </Column>
          ))}
        </Row>
      </Section>
    </Container>
  </Body>
</Html>
```

### Inline styles

```tsx
<Html>
  <Head />
  <Body>
    <Preview>Coffee Storage</Preview>
    <Container
      style={{
        backgroundColor: 'rgb(255,255,255)',
        borderRadius: '8px',
        marginLeft: 'auto',
        marginRight: 'auto',
        maxWidth: '900px',
        overflow: 'hidden',
        padding: '0px',
      }}
    >
      <Section>
        <Row
          style={{
            backgroundColor: 'rgb(41,37,36)',
            borderCollapse: 'separate',
            borderSpacing: '24px',
            margin: '0px',
            tableLayout: 'fixed',
            width: '100%',
          }}
        >
          <Column style={{ paddingLeft: '12px' }}>
            <Heading
              as="h1"
              style={{
                color: 'rgb(255,255,255)',
                fontSize: '28px',
                fontWeight: '700',
                marginBottom: '10px',
              }}
            >
              Coffee Storage
            </Heading>
            <Text
              style={{
                color: 'rgb(255,255,255,0.6)',
                fontSize: '14px',
                lineHeight: '20px',
                margin: '0px',
              }}
            >
              Keep your coffee fresher for longer with innovative technology.
            </Text>
            <Link
              href="#"
              style={{
                color: 'rgb(255,255,255,0.8)',
                display: 'block',
                fontSize: '14px',
                lineHeight: '20px',
                fontWeight: '600',
                marginTop: '12px',
                textDecorationLine: 'none',
              }}
            >
              Shop now →
            </Link>
          </Column>
          <Column style={{ width: '42%', height: '250px' }}>
            <Img
              src="/static/coffee-bean-storage.jpg"
              alt="Coffee Bean Storage"
              style={{
                borderRadius: '4px',
                height: '100%',
                marginRight: '-6px',
                objectFit: 'cover',
                objectPosition: 'center',
                width: '100%',
              }}
            />
          </Column>
        </Row>
      </Section>
      <Section
        style={{
          marginBottom: '24px',
        }}
      >
        <Row
          style={{
            borderCollapse: 'separate',
            borderSpacing: '12px',
            tableLayout: 'fixed',
            width: '100%',
          }}
        >
          {[
            {
              imageUrl: '/static/atmos-vacuum-canister.jpg',
              altText: 'Auto-Sealing Vacuum Canister',
              title: 'Auto-Sealing Vacuum Canister',
              description:
                'A container that automatically creates an airtight seal with a button press.',
              linkUrl: '#',
            },
            {
              imageUrl: '/static/vacuum-canister-clear-glass-bundle.jpg',
              altText: '3-Pack Vacuum Containers',
              title: '3-Pack Vacuum Containers',
              description:
                'Keep your coffee fresher for longer with this set of high-performance vacuum containers.',
              linkUrl: '#',
            },
          ].map((product) => (
            <Column
              key={product.title}
              style={{
                marginLeft: 'auto',
                marginRight: 'auto',
                maxWidth: '180px',
              }}
            >
              <Img
                src={product.imageUrl}
                alt={product.altText}
                style={{
                  borderRadius: '4px',
                  marginBottom: '18px',
                  width: '100%',
                }}
              />
              <div>
                <Heading
                  as="h2"
                  style={{
                    fontSize: '14px',
                    lineHeight: '20px',
                    fontWeight: '700',
                    marginBottom: '8px',
                  }}
                >
                  {product.title}
                </Heading>
                <Text
                  style={{
                    color: 'rgb(107,114,128)',
                    fontSize: '12px',
                    lineHeight: '20px',
                    margin: '0px',
                    paddingRight: '12px',
                  }}
                >
                  {product.description}
                </Text>
              </div>
            </Column>
          ))}
        </Row>
      </Section>
    </Container>
  </Body>
</Html>
```
