Divider
-
Notification
-
Dmitriy Groshev
Hi, i am josephin. How are you...
17:123 -
Sufiya Elija
I need job, Please help me.
Fri32 -
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...
Thu2 -
Janis Evans
Good Morning!
8:2212 -
Sufiya Elija
I need job, Please help me.
Fri32
-
-
-
-
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 CheckoutBag Total
$250.00 -
-
-
English 
French-
Spanich -
Arabic
-
-
Helen Walter
Admin
- General
- Components
- Applications
- Forms & Table
- Pages
- Miscellaneous
Divider Vertical
Use .divider class to separate the content and can separate the content vertically.
OR
<div class="flex flex-col w-full gap-2">
<div class="grid h-20 w-[40%] card rounded-box place-items-center bg-[#E5E6E6] bg-opacity-[0.45] sm:w-full dark:bg-sidebar-dark2"> Web Designer </div>
<div class="divider"> OR </div>
<div class="grid h-20 w-[40%] card rounded-box place-items-center bg-[#E5E6E6] bg-opacity-[0.45] sm:w-full dark:bg-sidebar-dark2"> UI/UX Designer </div>
</div>Divider without Text
Use .divider class to separate the two or more content and can separate the content vertically without any text.
<div class="flex flex-col w-full gap-2">
<div class="grid h-20 w-[40%] card rounded-box place-items-center bg-[#E5E6E6] bg-opacity-[0.45] sm:w-full dark:bg-sidebar-dark2"> Web Designer </div>
<div class="divider before:w-full after:w-0"> OR </div>
<div class="grid h-20 w-[40%] card rounded-box place-items-center bg-[#E5E6E6] bg-opacity-[0.45] sm:w-full dark:bg-sidebar-dark2"> Web Developer </div>
</div>Divider Horizontal
For separation of content use .divider & .horizontal class to separate the content horizontally.
OR
<div class="flex w-full gap-2">
<div class="grid h-20 card rounded-box place-items-center w-9/12 bg-[#E5E6E6] bg-opacity-[0.45] sm:w-full dark:bg-sidebar-dark2"> PhotoShop </div>
<div class="w-auto divider horizontal"> OR </div>
<div class="grid h-20 card rounded-box place-items-center w-9/12 bg-[#E5E6E6] bg-opacity-[0.45] sm:w-full dark:bg-sidebar-dark2"> Figma </div>
</div>Responsive Divider
To separate the content you can use .divider class for separation horizontally.
OR
<div class="flex w-full gap-2 lg:flex-col">
<div class="grid h-20 card rounded-box place-items-center w-9/12 bg-[#E5E6E6] bg-opacity-[0.45] lg:w-full dark:bg-sidebar-dark2"> Ecommerce Template</div>
<div class="divider min-lg:w-auto min-lg:horizontal lg:w-full md:w-[40%] sm:w-full"> OR </div>
<div class="grid h-20 card rounded-box place-items-center w-9/12 bg-[#E5E6E6] bg-opacity-[0.45] lg:w-full dark:bg-sidebar-dark2"> Admin Template </div>
</div>