--- title: Stack desc: Stack visually puts elements on top of each other. layout: components classnames: component: - class: stack desc: Puts the children elements on top of each other modifier: - class: stack-top desc: Aligns the children elements to the top - class: stack-bottom desc: Aligns the children elements to the bottom default: true - class: stack-start desc: Aligns the children elements to the start (horizontally) - class: stack-end desc: Aligns the children elements to the end (horizontally) --- > :INFO: > > You can use `w-*` and `h-*` classes to set the width and height of the stack, making all items the same size. ### ~3 divs in a stack
1
2
3
```html
1
2
3
``` ### ~stacked images
Tailwind CSS example 1 Tailwind CSS example 2 Tailwind CSS example 3
```html
``` ### ~stacked cards
A
B
C
```html
A
B
C
``` ### ~stacked cards (top direction)
A
B
C
```html
A
B
C
``` ### ~stacked cards (start direction)
A
B
C
```html
A
B
C
``` ### ~stacked cards (end direction)
A
B
C
```html
A
B
C
``` ### ~stacked cards with shadow
A
B
C
```html
A
B
C
``` ### ~stacked cards

Notification 1

You have 3 unread messages. Tap here to see.

Notification 2

You have 3 unread messages. Tap here to see.

Notification 3

You have 3 unread messages. Tap here to see.

```html

Notification 1

You have 3 unread messages. Tap here to see.

Notification 2

You have 3 unread messages. Tap here to see.

Notification 3

You have 3 unread messages. Tap here to see.

```