Basic Circular Avatar
import { Container, Img, Tailwind } from 'jsx-email';
<Tailwind>
<Container className="mx-auto max-w-[600px]">
<Img
src="https://example.com/avatar.jpg"
alt="John Doe"
width={48}
height={48}
style={{
borderRadius: '50%',
display: 'inline-block',
verticalAlign: 'middle'
}}
/>
</Container>
</Tailwind>Rounded Avatar
import { Container, Img, Tailwind } from 'jsx-email';
<Tailwind>
<Container className="mx-auto max-w-[600px]">
<Img
src="https://example.com/avatar.jpg"
alt="Sarah Smith"
width={48}
height={48}
style={{
borderRadius: 8,
display: 'inline-block',
verticalAlign: 'middle'
}}
/>
</Container>
</Tailwind>Avatar with Name
import { Column, Container, Img, Row, Tailwind, Text } from 'jsx-email';
<Tailwind>
<Container className="mx-auto max-w-[600px]">
<Row>
<Column style={{ width: 48, verticalAlign: 'middle' }}>
<Img
src="https://example.com/avatar.jpg"
alt="Jane Doe"
width={48}
height={48}
style={{ borderRadius: '50%' }}
/>
</Column>
<Column style={{ paddingLeft: 12, verticalAlign: 'middle' }}>
<Text style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
Jane Doe
</Text>
</Column>
</Row>
</Container>
</Tailwind>Avatar with Name and Description
import { Column, Container, Img, Row, Tailwind, Text } from 'jsx-email';
<Tailwind>
<Container className="mx-auto max-w-[600px]">
<Row>
<Column style={{ width: 48, verticalAlign: 'middle' }}>
<Img
src="https://example.com/avatar.jpg"
alt="Mike Johnson"
width={48}
height={48}
style={{ borderRadius: '50%' }}
/>
</Column>
<Column style={{ paddingLeft: 12, verticalAlign: 'middle' }}>
<Text style={{ margin: 0, fontSize: 14, fontWeight: 600, color: '#111827' }}>
Mike Johnson
</Text>
<Text style={{ margin: 0, fontSize: 12, color: '#6b7280' }}>
Software Engineer
</Text>
</Column>
</Row>
</Container>
</Tailwind>