# Heading

> Heading components for displaying titles and subtitles with different spacing options.

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

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

## Simple heading

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

### Tailwind

```tsx
<Heading className="text-center">Ray Tomlinson</Heading>
```

### Inline styles

```tsx
<Heading style={{ textAlign: 'center' }}>Ray Tomlinson</Heading>
```

## Multiple headings

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

### Tailwind

```tsx
<>
  <Heading as="h1" className="text-center">
    Jordan Walke
  </Heading>
  <Heading as="h2" className="text-center">
    Andrew Clark
  </Heading>
  <Heading as="h3" className="text-center">
    Dan Abramov
  </Heading>
  <Heading as="h4" className="text-center">
    Jason Bonta
  </Heading>
  <Heading as="h5" className="text-center">
    Joe Savona
  </Heading>
  <Heading as="h6" className="text-center">
    Josh Story
  </Heading>
</>
```

### Inline styles

```tsx
<>
  <Heading as="h1" style={{ textAlign: 'center' }}>
    Jordan Walke
  </Heading>
  <Heading as="h2" style={{ textAlign: 'center' }}>
    Andrew Clark
  </Heading>
  <Heading as="h3" style={{ textAlign: 'center' }}>
    Dan Abramov
  </Heading>
  <Heading as="h4" style={{ textAlign: 'center' }}>
    Jason Bonta
  </Heading>
  <Heading as="h5" style={{ textAlign: 'center' }}>
    Joe Savona
  </Heading>
  <Heading as="h6" style={{ textAlign: 'center' }}>
    Josh Story
  </Heading>
</>
```