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

### toast with alert inside

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast absolute">
    <div class="alert alert-info"><span>New message arrived.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast absolute">
    <div class="alert alert-info"><span>New message arrived.</span></div>
  </div>
</div>

```
### toast-top toast-start

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-top toast-start absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-top toast-start absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-top toast-center

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-top toast-center absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-top toast-center absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-top toast-end

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-top toast-end absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-top toast-end absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-start toast-middle

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-start toast-middle absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-start toast-middle absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-center toast-middle

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-center toast-middle absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-center toast-middle absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-end toast-middle

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-end toast-middle absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-end toast-middle absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-start toast-bottom (default)

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-start absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-start absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-center toast-bottom (default)

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-center absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-center absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```
### toast-end (default) toast-bottom (default)

<CodeRender code={`
<div class="w-full h-64 relative">
  <div class="toast toast-end absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

`} />
  
```html
<div class="w-full h-64 relative">
  <div class="toast toast-end absolute">
    <div class="alert alert-info"><span>New mail arrived.</span></div>
    <div class="alert alert-success"><span>Message sent successfully.</span></div>
  </div>
</div>

```   

    