Divider

ADMIN PANEL

Divider Vertical

You can use vertical divider as show code bellow

Preview Html
content
OR
content
      <div class="flex flex-col w-full ">  
        <div class="grid h-20 card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div> 
        <div class="divider"></div>
        <div class="grid h-20 card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div>
     </div>

Divider Horizontal

You can use horizontal divider as show code bellow

Preview Html
content
OR
content
      <div class="flex w-full ">  
        <div class="grid flex-grow h-24 card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div>  
        <div class="divider horizontal"></div>
        <div class="grid flex-grow h-24 card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div>
     </div>

Divider with no text

You can use divider as show code bellow

Preview Html
content
content
      <div class="flex flex-col w-full gap-2">  
        <div class="grid flex-grow card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div>   
        <div class="divider"></div>
        <div class="grid flex-grow card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div>
     </div>

Responsive (lg:divider-horizontal)

Responsive divider work on min width media

Preview Html
content
OR
content
       <div class="flex flex-row w-full min-lg:flex-col">  
        <div class="grid flex-grow min-lg:h-32 h-24 card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div>   
        <div class="divider min-lg:horizontal"></div>
        <div class="grid flex-grow min-lg:h-32 h-24 card rounded-box place-items-center bg-[#E5E6E6]">
           content
        </div>
     </div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now