Tailwind CSS Stack

Class Name	Type	Description
stack	Component	Stacks the child elements on top of each other.
stack-bottom-start	Modifier	Sets stacking direction to bottom-start.
stack-bottom-end	Modifier	Sets stacking direction to bottom-end.
stack-top	Modifier	Sets stacking direction to top.
stack-top-start	Modifier	Sets stacking direction to top-start.
stack-top-end	Modifier	Sets stacking direction to top-end.
stack-animated	Modifier	Adds animation to stack when hovered over.

Variants

Without stack

The following example displays div’s without stacking.

<div>
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

With stack

Wrap the stacked div’s with a wrapper div using the component class stack.

<div class="stack">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>  
</div>

Animated stack

Apply the modifier class stack-animated to enable animation on hover.

The stack-animated modifier class is also applicable to stacks with various positions.

<div class="stack stack-bottom-start stack-animated">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

Positions

Bottom (default)

By default, the stacking direction is from the bottom.

<div class="stack">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

Bottom start

Apply the modifier class stack-bottom-start to set the stack direction to bottom-start.

<div class="stack stack-bottom-start">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

Bottom end

Apply the modifier class stack-bottom-end to set the stack direction to bottom-end.

<div class="stack stack-bottom-end">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

Top

Apply the modifier class stack-top to set the stack direction to top.

<div class="stack stack-top">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

Top start

Apply the modifier class stack-top-start to set the stack direction to top-start.

<div class="stack stack-top-start">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

Top end

Apply the modifier class stack-top-end to set the stack direction to top-end.

<div class="stack stack-top-end">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-success text-success-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-warning text-warning-content grid h-20 w-32 place-content-center rounded">3</div>
</div>

Illustrations

Stacked images

The example below demonstrates a stack with images.

<div class="stack">
  <img src="https://cdn.flyonui.com/fy-assets/components/card/image-1.png" alt="iphone" class="w-32 rounded" />
  <img src="https://cdn.flyonui.com/fy-assets/components/card/image-2.png" alt="sydney" class="w-32 rounded" />
  <img src="https://cdn.flyonui.com/fy-assets/components/card/image-3.png" alt="rome" class="w-32 rounded" />
</div>

Stacked cards

The example below demonstrates a stack with cards.

<div class="stack">
  <div class="card border-base-content w-32 border shadow-none">
    <div class="card-body text-center">
      <p>Card A</p>
    </div>
  </div>
  <div class="card border-base-content w-32 border shadow-none">
    <div class="card-body text-center">
      <p>Card B</p>
    </div>
  </div>
  <div class="card border-base-content w-32 border shadow-none">
    <div class="card-body text-center">
      <p>Card C</p>
    </div>
  </div>
</div>

Stacked notifications

The example below demonstrates a notifications stack.

<div class="stack stack-animated">
  <div class="card bg-primary text-primary-content shadow-none">
    <div class="card-body">
      <h5 class="card-title text-primary-content">3 Notifications</h5>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="card bg-info text-info-content shadow-none">
    <div class="card-body">
      <h5 class="card-title text-info-content">2 Notifications</h5>
      <p>You have 2 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="card bg-secondary text-secbg-secondary-content shadow-none">
    <div class="card-body">
      <h5 class="card-title text-secbg-secondary-content">Notification 1</h5>
      <p>You have an unread message. Tap here to see.</p>
    </div>
  </div>
</div>

FlyonUI