-
Notification
-
Dmitriy Groshev
Hi, i am josephin. How are you...
17:123 -
Sufiya Elija
I need job, Please help me.
Fri -
Janis Evans
Good Morning!
8:2212 -
Mukrani Pabelo
Hi, i am josephin. How are you...
03:1410 -
Josephin Water
You’ve got some kind of a stom...
Thu -
Janis Evans
Good Morning!
8:2212 -
Sufiya Elija
I need job, Please help me.
Fri
-
-
-
-
Cart Items (25)
-
Flower Pot
$25.00
-
Iphone Max pro
$35.20
-
Royal Party Glass
$45.10
-
Water Proof Watch
$12.30
-
Traveling Duffle Bag
$32.10
Proceed to CheckoutAdd Total
$250.00 -
-
-
-
English -
French -
Spanich -
Arabic
-
-
Helen Walter
Admin
Stack
Divs Without Stacked
Stack puts elements on top of each other.
1
2
3
<div class="flex flex-wrap gap-2 justify-center">
<div>
<div class="grid h-16 w-32 rounded bg-primary text-white place-content-center"> 1 </div>
<div class="grid h-16 w-32 rounded bg-secondary text-white place-content-center"> 2 </div>
<div class="grid h-16 w-32 rounded bg-success text-white place-content-center"> 3 </div>
</div>
</div>
Images Without Stacked
Stack puts elements on top of each other. You can set images.
<div class="flex flex-wrap gap-2 justify-center">
<div>
<img src="../../image.jpg" alt="city" class="h-16 w-32 rounded">
<img src="../../image.jpg" alt="city" class="h-16 w-32 rounded">
<img src="../../image.jpg" alt="city" class="h-16 w-32 rounded">
</div>
</div>
Divs Stacked
You can stacked divs using stack class.
1
2
3
<div class="flex flex-wrap gap-2 justify-center">
<div class="stack mb-3">
<div class="stack-item text-white place-content-center rounded bg-info"> 1 </div>
<div class="stack-item text-white place-content-center rounded bg-danger"> 2 </div>
<div class="stack-item text-white place-content-center rounded bg-warning"> 3 </div>
</div>
</div>
Images Stacked
You can stacked images using stack class.
<div class="flex flex-wrap gap-2 justify-center">
<div class="stack mb-3">
<div class="stack-item">
<img src="../../image.jpg" alt="city" class="h-16 w-32 rounded">
</div>
<div class="stack-item">
<img src="../../image.jpg" alt="city" class="h-16 w-32 rounded">
</div>
<div class="stack-item">
<img src="../../image.jpg" alt="city" class="h-16 w-32 rounded">
</div>
</div>
</div>
Simple Cards Stacked
You can stacked simple cards using stack class.
card-1
card-2
card-3
<div class="flex flex-wrap gap-2 justify-center">
<div class="stack mb-3">
<div class="stack-item card border border-gray bg-gray-light text-title shawod-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-gray-light text-title shawod-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-gray-light text-title shawod-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 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 gap-2 justify-center">
<div class="stack mb-3">
<div class="stack-item card border border-gray bg-white text-title shawod-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 shawod-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 shawod-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 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 gap-2 justify-center">
<div class="stack mb-3">
<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 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 gap-2 justify-center">
<div class="stack mb-3">
<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>