# Container

> Container components for wrapping content with different layout options.

Web: https://vuemail.dev/components/container

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Simple container

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/simple-container

### Tailwind

```vue
<script setup lang="ts">
import { Container, Text } from '@vuemaildev/vuemail';
</script>

<template>
  <Container class="bg-gray-400">
    <Text class="px-[12px] text-white">
      Hello, I am a container. I keep content centered and maintain it to a
      maximum width while still taking up as much space as possible!
    </Text>
  </Container>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import { Container, Text } from '@vuemaildev/vuemail';
</script>

<template>
  <Container :style="{ backgroundColor: 'rgb(156,163,175)' }">
    <Text
      :style="{
        color: 'rgb(255,255,255)',
        paddingLeft: '12px',
        paddingRight: '12px',
      }"
    >
      Hello, I am a container. I keep content centered and maintain it to a
      maximum width while still taking up as much space as possible!
    </Text>
  </Container>
</template>
```