
import CssTable from '../../components/CssTable'
import Demo from '../../components/demo/stack/index.mdx'

## Default Class Table
  
<CssTable name="stack" />
  
## Demo
  
<Demo></Demo>
  
## Css Schema


### Base

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Base Schema</span>
</div>
<div class="collapse-content"> 

```css
.stack {
  @apply inline-grid;
}
.stack > * {
  @apply col-start-1 row-start-1;
  transform: translateY(10%) scale(0.9);
  z-index: 1;
}
.stack > *:nth-child(2) {
  transform: translateY(5%) scale(0.95);
  z-index: 2;
}
.stack > *:nth-child(1) {
  transform: translateY(0) scale(1);
  z-index: 3;
}

```

</div>
</div>



### Styled

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Styled Schema</span>
</div>
<div class="collapse-content"> 

```css
.stack {
  @apply place-items-center items-end;
}
.stack > * {
  @apply w-full;
  @apply opacity-60;
}
.stack > *:nth-child(2) {
  @apply opacity-80;
}
.stack > *:nth-child(1) {
  @apply opacity-100;
}

```

</div>
</div>



### Utils

<div className="collapse">
<input type="checkbox" /> 
<div class="collapse-title px-0">
<span class="btn">Click to Show Utils Schema</span>
</div>
<div class="collapse-content"> 

```css

```

</div>
</div>



