# Code Inline

> Inline code components for displaying small code snippets within text.

Web: https://react.email/components/code-inline

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

## Simple Code Inline

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

### Tailwind

```tsx
<Text className="text-center">
  Install the{' '}
  <CodeInline className="rounded-[6px] bg-gray-300 px-[4px] py-[2px]">
    react-email
  </CodeInline>{' '}
  package
</Text>
```

### Inline styles

```tsx
<Text style={{ textAlign: 'center' }}>
  Install the{' '}
  <CodeInline
    style={{
      backgroundColor: 'rgb(209,213,219)',
      borderRadius: 6,
      paddingLeft: 4,
      paddingRight: 4,
      paddingTop: 2,
      paddingBottom: 2,
    }}
  >
    react-email
  </CodeInline>{' '}
  package
</Text>
```

## Code Inline with different colors

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/code-inline-with-different-colors

### Tailwind

```tsx
<Text className="text-center">
  Install the{' '}
  <CodeInline className="rounded-[6px] bg-green-300 px-[4px] py-[2px]">
    react-email
  </CodeInline>{' '}
  package
</Text>
```

### Inline styles

```tsx
<Text style={{ textAlign: 'center' }}>
  Install the{' '}
  <CodeInline
    style={{
      backgroundColor: 'rgb(134,239,172)',
      borderRadius: 6,
      paddingLeft: 4,
      paddingRight: 4,
      paddingTop: 2,
      paddingBottom: 2,
    }}
  >
    react-email
  </CodeInline>{' '}
  package
</Text>
```