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

### 3 divs without stack

<CodeRender code={`
<div>
  <div class="grid w-32 h-20 rounded bg-primary text-primary-content place-content-center">1</div>
  <div class="grid w-32 h-20 rounded bg-accent text-accent-content place-content-center">2</div>
  <div class="grid w-32 h-20 rounded bg-secondary text-secondary-content place-content-center">
    3
  </div>
</div>

`} />
  
```html
<div>
  <div class="grid w-32 h-20 rounded bg-primary text-primary-content place-content-center">1</div>
  <div class="grid w-32 h-20 rounded bg-accent text-accent-content place-content-center">2</div>
  <div class="grid w-32 h-20 rounded bg-secondary text-secondary-content place-content-center">
    3
  </div>
</div>

```
### 3 divs with stack

<CodeRender code={`
<div class="stack mb-4">
  <div class="grid w-32 h-20 rounded bg-primary text-primary-content place-content-center">1</div>
  <div class="grid w-32 h-20 rounded bg-accent text-accent-content place-content-center">2</div>
  <div class="grid w-32 h-20 rounded bg-secondary text-secondary-content place-content-center">
    3
  </div>
</div>

`} />
  
```html
<div class="stack mb-4">
  <div class="grid w-32 h-20 rounded bg-primary text-primary-content place-content-center">1</div>
  <div class="grid w-32 h-20 rounded bg-accent text-accent-content place-content-center">2</div>
  <div class="grid w-32 h-20 rounded bg-secondary text-secondary-content place-content-center">
    3
  </div>
</div>

```

### stacked cards

<CodeRender code={`
<div class="stack mb-4">
  <div class="text-center border border-base-content card w-36 bg-base-100">
    <div class="card-body">A</div>
  </div>
  <div class="text-center border border-base-content card w-36 bg-base-100">
    <div class="card-body">B</div>
  </div>
  <div class="text-center border border-base-content card w-36 bg-base-100">
    <div class="card-body">C</div>
  </div>
</div>

`} />
  
```html
<div class="stack mb-4">
  <div class="text-center border border-base-content card w-36 bg-base-100">
    <div class="card-body">A</div>
  </div>
  <div class="text-center border border-base-content card w-36 bg-base-100">
    <div class="card-body">B</div>
  </div>
  <div class="text-center border border-base-content card w-36 bg-base-100">
    <div class="card-body">C</div>
  </div>
</div>

```
### stacked cards with shadow

<CodeRender code={`
<div class="stack mb-4">
  <div class="text-center shadow-md w-36 card bg-base-200"><div class="card-body">A</div></div>
  <div class="text-center shadow w-36 card bg-base-200"><div class="card-body">B</div></div>
  <div class="text-center shadow-sm w-36 card bg-base-200"><div class="card-body">C</div></div>
</div>

`} />
  
```html
<div class="stack mb-4">
  <div class="text-center shadow-md w-36 card bg-base-200"><div class="card-body">A</div></div>
  <div class="text-center shadow w-36 card bg-base-200"><div class="card-body">B</div></div>
  <div class="text-center shadow-sm w-36 card bg-base-200"><div class="card-body">C</div></div>
</div>

```
### stacked cards

<CodeRender code={`
<div class="stack mb-4">
  <div class="shadow-md card bg-primary text-primary-content">
    <div class="card-body">
      <h2 class="card-title">Notification 1</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="shadow card bg-primary text-primary-content">
    <div class="card-body">
      <h2 class="card-title">Notification 2</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="shadow-sm card bg-primary text-primary-content">
    <div class="card-body">
      <h2 class="card-title">Notification 3</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
</div>

`} />
  
```html
<div class="stack mb-4">
  <div class="shadow-md card bg-primary text-primary-content">
    <div class="card-body">
      <h2 class="card-title">Notification 1</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="shadow card bg-primary text-primary-content">
    <div class="card-body">
      <h2 class="card-title">Notification 2</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="shadow-sm card bg-primary text-primary-content">
    <div class="card-body">
      <h2 class="card-title">Notification 3</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
</div>

```   

    