# Divider

> Divider components to separate content in rows or columns.

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

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

## Simple divider

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

### Tailwind

```tsx
<>
  <Text>Before divider</Text>
  <Hr className="my-[16px] border-gray-300 border-t-2" />
  <Text>After divider</Text>
</>
```

### Inline styles

```tsx
<>
  <Text>Before divider</Text>
  <Hr
    style={{
      marginTop: 16,
      borderColor: 'rgb(209,213,219)',
      marginBottom: 16,
      borderTopWidth: 2,
    }}
  />
  <Text>After divider</Text>
</>
```

## Divider between rows and columns

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/divider-between-rows-and-columns

### Tailwind

```tsx
<>
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
  <Hr className="my-[16px] border-gray-300" />
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
</>
```

### Inline styles

```tsx
<>
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
  <Hr
    style={{
      marginTop: 16,
      borderColor: 'rgb(209,213,219)',
      marginBottom: 16,
    }}
  />
  <Row>
    <Column>First column</Column>
    <Column>Second column</Column>
  </Row>
</>
```