Roxo - Premium Admin Template

- Notifications
  Check all
- Gary Hogan5 mins ago
  
  I have add 2 files for new task
  
  1_day_task.pdf1 MB
  
  day_task.pdf4 MB
- Edwin Day30 mins ago
  
  Marked the bug analysis task as done
- Ralph Waters45 mins ago
  
  New bugs added for designer
- Bookmark
- - Email
  - Feather icon
  - Chat
- Cart
  Check all
- Mi Watch Revolve
  
  $ 10.00
- Ulrich Duffel Bag
  
  $140.00
- Tree Stylish Pot
  
  $ 840.00
- Total
  
  $ 990.00
- Proceed to checkout
- Messages
  Send a new message
- Robert fox
  
  Lorem Ipsum is simply dummy give information
  10 mins ago
  online
- Andrew Young
  
  Lorem Ipsum is simply dummy give information
  25 mins ago
  warning
- Lucia Slaughter
  
  Lorem Ipsum is simply dummy give information
  1 hr ago
  online
Helen Walter
Admin
- Inbox
- Taskboard
- Log out

Stack

ADMIN PANEL

Box Without Stack

Stack visually puts elements on top of each other.

<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 Stack

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

Preview Html

<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>

Stacked Box

You can use stacked box by adding .stackclass.

Preview Html

<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>

Stacked Images

You can use stacked box by adding .stackclass.

Preview Html

<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 Stacked Cards

You can stacked simple cards using .stackclass.

Preview Html

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-white text-title shadow-none rounded-2xl place-content-center !w-40">
           <div class="card-body"> card-1 </div>
       </div>
       <div class="stack-item card border border-gray bg-white text-title shadow-none rounded-2xl place-content-center !w-40">
           <div class="card-body"> card-2 </div>
       </div>
       <div class="stack-item card border border-gray bg-white text-title shadow-none rounded-2xl place-content-center !w-40">
           <div class="card-body"> card-3 </div>
       </div>
   </div> 
</div>

Cards Stacked

You can stacked cards using .stackclass.

Preview Html

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">
           <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">
           <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">
           <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

You can stacked cards using .stackclass.

Preview Html

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 shawod-none rounded-2xl !w-auto !h-auto">
           <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 shawod-none rounded-2xl !w-auto !h-auto">
           <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 shawod-none rounded-2xl !w-auto !h-auto">
           <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

You can stacked cards using .stackclass.

Preview Html

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 shawod-none rounded-2xl !w-auto !h-auto">
           <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 shawod-none rounded-2xl !w-auto !h-auto">
           <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 shawod-none rounded-2xl !w-auto !h-auto">
           <div class="card-body"> 
               <h3 class="card-title"> Notifications </h3>
               <p> You have 4 unread messages. Tap to see </p>
           </div>
       </div>
   </div> 
</div>