Stack

Boxes without Stacked

Stack puts elements on top of each other.

1
2
3
<div class="flex flex-wrap justify-center gap-2">
   <div>
       <div class="grid w-32 h-16 text-white rounded bg-primary place-content-center"> 1 </div>
       <div class="grid w-32 h-16 text-white rounded bg-secondary place-content-center"> 2 </div>
       <div class="grid w-32 h-16 text-white rounded bg-info place-content-center"> 3 </div>
   </div> 
</div>

Images without Stacked

Stack puts elements on top of each other. You can set images.

citycitycity
<div class="flex flex-wrap justify-center gap-2">
   <div>
       <img src="../../image.jpg" alt="city" class="w-32 h-16 rounded">
       <img src="../../image.jpg" alt="city" class="w-32 h-16 rounded">
       <img src="../../image.jpg" alt="city" class="w-32 h-16 rounded">
   </div> 
</div>

Boxes Stacked

Set stacked boxes using .stack class.

1
2
3
<div class="flex flex-wrap justify-center gap-2">
   <div class="mb-3 stack">
       <div class="text-white rounded stack-item place-content-center bg-success"> 1 </div>
       <div class="text-white rounded stack-item place-content-center bg-danger"> 2 </div>
       <div class="text-white rounded stack-item place-content-center bg-warning"> 3 </div>
   </div> 
</div>

Images Stacked

Add stacked images using .stack class.

city
city
city
 <div class="flex flex-wrap justify-center gap-2">
   <div class="mb-3 stack">
       <div class="stack-item">
           <img src="../../image.jpg" alt="city" class="w-32 h-16 rounded"> 
       </div>
       <div class="stack-item">
           <img src="../../image.jpg" alt="city" class="w-32 h-16 rounded"> 
       </div>
       <div class="stack-item">
           <img src="../../image.jpg" alt="city" class="w-32 h-16 rounded"> 
       </div>
   </div> 
</div>

Simple Cards Stacked

Set stacked simple cards using .stack class.

card-1
card-2
card-3
<div class="flex flex-wrap justify-center gap-2">
   <div class="mb-3 stack">
       <div class="stack-item card border border-gray bg-gray-light text-title shadow-none rounded-2xl place-content-center !w-40 dark:border-border-dark">
           <div class="card-body"> card-1 </div>
       </div>
       <div class="stack-item card border border-gray bg-gray-light text-title shadow-none rounded-2xl place-content-center !w-40 dark:border-border-dark">
           <div class="card-body"> card-2 </div>
       </div>
       <div class="stack-item card border border-gray bg-gray-light text-title shadow-none rounded-2xl place-content-center !w-40 dark:border-border-dark">
           <div class="card-body"> card-3 </div>
       </div>
   </div> 
</div>

Cards Stacked

Stacked cards with the help of .stack class.

Need Update

You need update right now!

Need Update

You need update right now!

Need Update

You need update right now!

<div class="flex flex-wrap justify-center gap-2">
   <div class="mb-3 stack">
       <div class="stack-item card border border-gray bg-white text-title shadow-none rounded-2xl !w-auto !h-auto dark:border-border-dark">
           <div class="card-body"> 
               <h3 class="card-title text-title"> Need Update </h3>
               <p> You need update right now! </p>
           </div>
       </div>
       <div class="stack-item card border border-gray bg-white text-title shadow-none rounded-2xl !w-auto !h-auto dark:border-border-dark">
           <div class="card-body"> 
               <h3 class="card-title text-title"> Need Update </h3>
               <p> You need update right now! </p>
           </div>
       </div>
       <div class="stack-item card border border-gray bg-white text-title shadow-none rounded-2xl !w-auto !h-auto dark:border-border-dark">
           <div class="card-body"> 
               <h3 class="card-title text-title"> Need Update </h3>
               <p> You need update right now! </p>
           </div>
       </div>
   </div> 
</div>

Colored Cards Stacked

Stacked cards using .stack class.

Latest News

Click here, for more latest update!!

Latest News

Click here, for more latest update!!

Latest News

Click here, for more latest update!!

<div class="flex flex-wrap justify-center gap-2">
   <div class="mb-3 stack">
       <div class="stack-item card bg-danger text-white shadow-none rounded-2xl !w-auto !h-auto dark:bg-sidebar-dark2 dark:border-border-dark">
           <div class="card-body"> 
               <h3 class="card-title"> Latest News </h3>
               <p> Click here, for more latest update!! </p>
           </div>
       </div>
       <div class="stack-item card bg-danger text-white shadow-none rounded-2xl !w-auto !h-auto dark:bg-sidebar-dark2 dark:border-border-dark">
           <div class="card-body"> 
               <h3 class="card-title"> Latest News </h3>
               <p> Click here, for more latest update!! </p>
           </div>
       </div>
       <div class="stack-item card bg-danger text-white shadow-none rounded-2xl !w-auto !h-auto dark:bg-sidebar-dark2 dark:border-border-dark">
           <div class="card-body"> 
               <h3 class="card-title"> Latest News </h3>
               <p> Click here, for more latest update!! </p>
           </div>
       </div>
   </div> 
</div>

Multi Colored Stacked

Set stacked colored cards using .stack class.

Notifications

You have 4 unread messages. Tap to see

Notifications

You have 4 unread messages. Tap to see

Notifications

You have 4 unread messages. Tap to see

<div class="flex flex-wrap justify-center gap-2">
   <div class="mb-3 stack">
       <div class="stack-item card bg-info text-white shadow-none rounded-2xl !w-auto !h-auto dark:bg-info">
           <div class="card-body"> 
               <h3 class="card-title"> Notifications </h3>
               <p> You have 4 unread messages. Tap to see </p>
           </div>
       </div>
       <div class="stack-item card bg-danger text-white shadow-none rounded-2xl !w-auto !h-auto dark:bg-danger">
           <div class="card-body"> 
               <h3 class="card-title"> Notifications </h3>
               <p> You have 4 unread messages. Tap to see </p>
           </div>
       </div>
       <div class="stack-item card bg-warning text-white shadow-none rounded-2xl !w-auto !h-auto dark:dark:bg-warning">
           <div class="card-body"> 
               <h3 class="card-title"> Notifications </h3>
               <p> You have 4 unread messages. Tap to see </p>
           </div>
       </div>
   </div> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode