import CodeRender from '../../CodeRender'

### Avatar

<CodeRender code={`
<div class="avatar">
  <div class="w-24 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

`} />
  
```html
<div class="avatar">
  <div class="w-24 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

```
### Avatar in custom sizes

<CodeRender code={`
<div class="avatar">
  <div class="w-24 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-16 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-12 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-8 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

`} />
  
```html
<div class="avatar">
  <div class="w-24 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-16 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-12 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-8 rounded bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

```
### Avatar rounded

<CodeRender code={`
<div class="avatar">
  <div class="w-24 rounded-xl bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 rounded-full bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

`} />
  
```html
<div class="avatar">
  <div class="w-24 rounded-xl bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 rounded-full bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

```
### Avatar with mask

<CodeRender code={`
<div class="avatar">
  <div class="w-24 mask mask-squircle bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-hexagon bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-triangle bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

`} />
  
```html
<div class="avatar">
  <div class="w-24 mask mask-squircle bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-hexagon bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar">
  <div class="w-24 mask mask-triangle bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

```
### Avatar group

<CodeRender code={`
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
</div>

`} />
  
```html
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
</div>

```
### Avatar group with counter

<CodeRender code={`
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar placeholder">
    <div class="w-12 bg-neutral text-neutral-content"><span>+99</span></div>
  </div>
</div>

`} />
  
```html
<div class="avatar-group -space-x-6 rtl:space-x-reverse">
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar">
    <div class="w-12 bg-base-300"><img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" /></div>
  </div>
  <div class="avatar placeholder">
    <div class="w-12 bg-neutral text-neutral-content"><span>+99</span></div>
  </div>
</div>

```
### Avatar with ring

<CodeRender code={`
<div class="avatar">
  <div class="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

`} />
  
```html
<div class="avatar">
  <div class="w-24 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

```
### Avatar with presence indicator

<CodeRender code={`
<div class="avatar online">
  <div class="w-24 rounded-full bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar offline">
  <div class="w-24 rounded-full bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

`} />
  
```html
<div class="avatar online">
  <div class="w-24 rounded-full bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>
<div class="avatar offline">
  <div class="w-24 rounded-full bg-base-300">
    <img src="/pig.jpg" alt="Tailwind-CSS-Avatar-component" />
  </div>
</div>

```
### Avatar placeholder

<CodeRender code={`
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-24">
    <span class="text-3xl">D</span>
  </div>
</div>
<div class="avatar online placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-16">
    <span class="text-xl">AI</span>
  </div>
</div>
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-12"><span>SY</span></div>
</div>
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-8">
    <span class="text-xs">UI</span>
  </div>
</div>

`} />
  
```html
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-24">
    <span class="text-3xl">D</span>
  </div>
</div>
<div class="avatar online placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-16">
    <span class="text-xl">AI</span>
  </div>
</div>
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-12"><span>SY</span></div>
</div>
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-8">
    <span class="text-xs">UI</span>
  </div>
</div>

```   

    