# Testimonials

> Testimonials components for displaying testimonials.

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

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

## Testimonial simple centered

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/testimonial-simple-centered

### Tailwind

```tsx
<Section className="text-center text-[14px] leading-[20px] text-gray-600">
  <p className="m-0 text-[16px] leading-[24px] font-light text-gray-800">
    Design is not just what it looks like and feels like. Design is how it
    works. The people who are crazy enough to think they can change the world
    are the ones who do. Innovation distinguishes between a leader and a
    follower.
  </p>
  <Row width={undefined} align="center" className="mt-8">
    <Column
      valign="middle"
      width="32"
      height="32"
      className="h-[32px] w-[32px] rounded-full overflow-hidden bg-gray-600"
    >
      <Img
        src="/static/steve-jobs.jpg"
        width={32}
        height={32}
        alt="Steve Jobs"
        className="h-[32px] w-[32px] object-cover"
      />
    </Column>
    <Column valign="middle">
      <p className="m-0 ml-[12px] text-[14px] leading-[20px] font-semibold text-gray-900 mr-[8px]">
        Steve Jobs
      </p>
    </Column>
    <Column valign="middle">
      <span className="text-[14px] leading-[20px] mr-[8px]">•</span>
    </Column>
    <Column valign="middle">
      <p className="m-0 text-[14px] leading-[20px]">Co-founder of Apple</p>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section
  style={{
    textAlign: 'center',
    fontSize: '14px',
    lineHeight: '20px',
    color: '#4b5563',
  }}
>
  <p
    style={{
      margin: 0,
      fontSize: '16px',
      lineHeight: '24px',
      fontWeight: 300,
      color: '#1f2937',
    }}
  >
    Design is not just what it looks like and feels like. Design is how it
    works. The people who are crazy enough to think they can change the world
    are the ones who do. Innovation distinguishes between a leader and a
    follower.
  </p>
  <Row
    style={{
      marginTop: '32px',
    }}
    width={undefined}
    align="center"
  >
    <Column valign="middle">
      <div
        style={{
          height: '32px',
          width: '32px',
          borderRadius: '9999px',
          overflow: 'hidden',
          backgroundColor: '#4b5563',
        }}
      >
        <Img
          src="/static/steve-jobs.jpg"
          width={32}
          height={32}
          alt="Steve Jobs"
          style={{ height: '100%', width: '100%', objectFit: 'cover' }}
        />
      </div>
    </Column>
    <Column valign="middle">
      <p
        style={{
          margin: 0,
          marginLeft: '12px',
          fontSize: '14px',
          lineHeight: '20px',
          fontWeight: 600,
          color: '#111827',
          marginRight: 8,
        }}
      >
        Steve Jobs
      </p>
    </Column>
    <Column valign="middle">
      <span style={{ fontSize: '14px', lineHeight: '20px', marginRight: 8 }}>
        •
      </span>
    </Column>
    <Column valign="middle">
      <p
        style={{
          margin: 0,
          fontSize: '14px',
          lineHeight: '20px',
        }}
      >
        Co-founder of Apple
      </p>
    </Column>
  </Row>
</Section>
```

## Testimonial with large avatar

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/testimonial-with-large-avatar

### Tailwind

```tsx
<ResponsiveRow className="mx-[12px] my-[16px] text-[14px] text-gray-600">
  <ResponsiveColumn className="mt-0 mr-[24px] mb-[24px] ml-0 w-64 overflow-hidden rounded-3xl">
    <Img
      src="/static/steve-jobs.jpg"
      width={320}
      height={320}
      alt="Steve Jobs"
      className="h-[320px] w-full object-cover object-center"
    />
  </ResponsiveColumn>
  <ResponsiveColumn className="pr-[24px]">
    <p className="mx-0 my-0 mb-[24px] text-left text-[16px] leading-[1.625] font-light text-gray-700">
      Design is not just what it looks like and feels like. Design is how it
      works. The people who are crazy enough to think they can change the
      world are the ones who do. Innovation distinguishes between a leader and
      a follower.
    </p>
    <p className="mx-0 mt-0 mb-[4px] text-left text-[16px] font-semibold text-gray-800">
      Steve Jobs
    </p>
    <p className="m-0 text-left text-[14px] text-gray-600">
      Co-founder of Apple
    </p>
  </ResponsiveColumn>
</ResponsiveRow>
```

### Inline styles

```tsx
<ResponsiveRow
  style={{
    marginLeft: '12px',
    marginRight: '12px',
    marginTop: '16px',
    marginBottom: '16px',
    fontSize: '14px',
    color: '#4b5563',
  }}
>
  <ResponsiveColumn
    style={{
      marginTop: '0',
      marginRight: '24px',
      marginBottom: '24px',
      marginLeft: '0',
      width: '256px',
      overflow: 'hidden',
      borderRadius: '24px',
    }}
  >
    <Img
      src="/static/steve-jobs.jpg"
      width={320}
      height={320}
      alt="Steve Jobs"
      style={{
        height: '320px',
        width: '100%',
        objectFit: 'cover',
        objectPosition: 'center',
      }}
    />
  </ResponsiveColumn>
  <ResponsiveColumn style={{ paddingRight: '24px' }}>
    <p
      style={{
        marginLeft: '0',
        marginRight: '0',
        marginTop: '0',
        marginBottom: '24px',
        textAlign: 'left',
        fontSize: '16px',
        lineHeight: '1.625',
        fontWeight: '300',
        color: '#374151',
      }}
    >
      Design is not just what it looks like and feels like. Design is how it
      works. The people who are crazy enough to think they can change the
      world are the ones who do. Innovation distinguishes between a leader and
      a follower.
    </p>
    <p
      style={{
        marginLeft: '0',
        marginRight: '0',
        marginTop: '0',
        marginBottom: '4px',
        textAlign: 'left',
        fontSize: '16px',
        fontWeight: '600',
        color: '#1f2937',
      }}
    >
      Steve Jobs
    </p>
    <p
      style={{
        margin: '0',
        textAlign: 'left',
        fontSize: '14px',
        color: '#4b5563',
      }}
    >
      Co-founder of Apple
    </p>
  </ResponsiveColumn>
</ResponsiveRow>
```