# Stats

> Stats components for displaying statistics.

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

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

## Stats simple

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

### Tailwind

```tsx
<ResponsiveRow>
  <ResponsiveColumn>
    <p className="m-0 text-left text-[18px] leading-[24px] font-bold tracking-tight text-gray-900 tabular-nums">
      42
    </p>
    <p className="m-0 text-left text-[12px] leading-[18px] text-gray-500">
      The Answer
    </p>
  </ResponsiveColumn>
  <ResponsiveColumn>
    <p className="m-0 text-left text-[18px] leading-[24px] font-bold tracking-tight text-gray-900 tabular-nums">
      10M
    </p>
    <p className="m-0 text-left text-[12px] leading-[18px] text-gray-500">
      Days for Earth Mark II
    </p>
  </ResponsiveColumn>
  <ResponsiveColumn>
    <p className="m-0 text-left text-[18px] leading-[24px] font-bold tracking-tight text-gray-900 tabular-nums">
      2^276,709:1
    </p>
    <p className="m-0 text-left text-[12px] leading-[18px] text-gray-500">
      Improbability Drive odds
    </p>
  </ResponsiveColumn>
</ResponsiveRow>
```

### Inline styles

```tsx
<ResponsiveRow>
  <ResponsiveColumn>
    <p
      style={{
        margin: 0,
        textAlign: 'left',
        fontSize: '18px',
        lineHeight: '24px',
        fontWeight: 700,
        letterSpacing: '-0.025em',
        color: '#111827',
        fontVariantNumeric: 'tabular-nums',
      }}
    >
      42
    </p>
    <p
      style={{
        margin: 0,
        textAlign: 'left',
        fontSize: '12px',
        lineHeight: '18px',
        color: '#6b7280',
      }}
    >
      The Answer
    </p>
  </ResponsiveColumn>
  <ResponsiveColumn>
    <p
      style={{
        margin: 0,
        textAlign: 'left',
        fontSize: '18px',
        lineHeight: '24px',
        fontWeight: 700,
        letterSpacing: '-0.025em',
        color: '#111827',
        fontVariantNumeric: 'tabular-nums',
      }}
    >
      10M
    </p>
    <p
      style={{
        margin: 0,
        textAlign: 'left',
        fontSize: '12px',
        lineHeight: '18px',
        color: '#6b7280',
      }}
    >
      Days for Earth Mark II
    </p>
  </ResponsiveColumn>
  <ResponsiveColumn>
    <p
      style={{
        margin: 0,
        textAlign: 'left',
        fontSize: '18px',
        lineHeight: '24px',
        fontWeight: 700,
        letterSpacing: '-0.025em',
        color: '#111827',
        fontVariantNumeric: 'tabular-nums',
      }}
    >
      2^276,709:1
    </p>
    <p
      style={{
        margin: 0,
        textAlign: 'left',
        fontSize: '12px',
        lineHeight: '18px',
        color: '#6b7280',
      }}
    >
      Improbability Drive odds
    </p>
  </ResponsiveColumn>
</ResponsiveRow>
```

## Stats stepped

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

### Tailwind

```tsx
<Section>
  <Row className="mb-2">
    <Column className="min-h-[112px] rounded-2xl bg-gray-100 p-4">
      <p className="mb-0 text-[24px] leading-[32px] font-bold tracking-tight tabular-nums text-gray-900">
        42
      </p>
      <div className="text-gray-700">
        <p className="mb-0 text-[15px] leading-[22px]">The Answer</p>
        <p className="mb-0 mt-1 text-[13px] leading-[18px] text-gray-600">
          To life, the universe, and everything computed by Deep Thought.
        </p>
      </div>
    </Column>
  </Row>
  <Row className="mb-2">
    <Column className="min-h-[192px] rounded-2xl bg-gray-900 p-4">
      <p className="mb-0 text-[24px] leading-[32px] font-bold tracking-tight tabular-nums text-gray-50">
        10M
      </p>
      <div className="text-gray-300">
        <p className="mb-0 text-[15px] leading-[22px]">
          Years for Earth Mark II
        </p>
        <p className="mb-0 mt-1 text-[13px] leading-[18px] text-gray-400">
          Time required by Magrathea to build a replacement Earth.
        </p>
      </div>
    </Column>
  </Row>
  <Row>
    <Column className="min-h-[128px] rounded-2xl bg-indigo-700 p-4">
      <p className="mb-0 text-[24px] leading-[32px] font-bold tracking-tight tabular-nums text-indigo-50">
        2^276,709:1
      </p>
      <div className="text-indigo-100">
        <p className="mb-0 text-[15px] leading-[22px]">
          Improbability Drive odds
        </p>
        <p className="mb-0 mt-1 text-[13px] leading-[18px] text-indigo-200">
          Chances against successfully activating the infinite improbability
          drive.
        </p>
      </div>
    </Column>
  </Row>
</Section>
```

### Inline styles

```tsx
<Section>
  <Row style={{ marginBottom: '8px' }}>
    <Column
      style={{
        minHeight: '112px',
        borderRadius: '16px',
        backgroundColor: '#f3f4f6',
        padding: '16px',
      }}
    >
      <p
        style={{
          marginBottom: '0',
          fontSize: '24px',
          lineHeight: '32px',
          fontWeight: 'bold',
          letterSpacing: '-0.025em',
          fontVariantNumeric: 'tabular-nums',
          color: '#111827',
        }}
      >
        42
      </p>
      <div style={{ color: '#374151' }}>
        <p
          style={{ marginBottom: '0', fontSize: '15px', lineHeight: '22px' }}
        >
          The Answer
        </p>
        <p
          style={{
            marginBottom: '0',
            marginTop: '4px',
            fontSize: '13px',
            lineHeight: '18px',
            color: '#4b5563',
          }}
        >
          To life, the universe, and everything computed by Deep Thought.
        </p>
      </div>
    </Column>
  </Row>
  <Row style={{ marginBottom: '8px' }}>
    <Column
      style={{
        minHeight: '192px',
        borderRadius: '16px',
        backgroundColor: '#111827',
        padding: '16px',
      }}
    >
      <p
        style={{
          marginBottom: '0',
          fontSize: '24px',
          lineHeight: '32px',
          fontWeight: 'bold',
          letterSpacing: '-0.025em',
          fontVariantNumeric: 'tabular-nums',
          color: '#f9fafb',
        }}
      >
        10M
      </p>
      <div style={{ color: '#d1d5db' }}>
        <p
          style={{ marginBottom: '0', fontSize: '15px', lineHeight: '22px' }}
        >
          Years for Earth Mark II
        </p>
        <p
          style={{
            marginBottom: '0',
            marginTop: '4px',
            fontSize: '13px',
            lineHeight: '18px',
            color: '#9ca3af',
          }}
        >
          Time required by Magrathea to build a replacement Earth.
        </p>
      </div>
    </Column>
  </Row>
  <Row>
    <Column
      style={{
        minHeight: '128px',
        borderRadius: '16px',
        backgroundColor: '#4338ca',
        padding: '16px',
      }}
    >
      <p
        style={{
          marginBottom: '0',
          fontSize: '24px',
          lineHeight: '32px',
          fontWeight: 'bold',
          letterSpacing: '-0.025em',
          fontVariantNumeric: 'tabular-nums',
          color: '#eef2ff',
        }}
      >
        2^276,709:1
      </p>
      <div style={{ color: '#e0e7ff' }}>
        <p
          style={{ marginBottom: '0', fontSize: '15px', lineHeight: '22px' }}
        >
          Improbability Drive odds
        </p>
        <p
          style={{
            marginBottom: '0',
            marginTop: '4px',
            fontSize: '13px',
            lineHeight: '18px',
            color: '#c7d2fe',
          }}
        >
          Chances against successfully activating the infinite improbability
          drive.
        </p>
      </div>
    </Column>
  </Row>
</Section>
```