Divider

Classes Information

ClassNameDescription
dividerBase class
divider-verticalSet vertical orientation
divider-horizontalBase horizontal orientation

Basic Usage

Example Code

html
<div class="divider"></div>

Vertical

OR

Example Code

html
<div class="divider divider-vertical h-44">OR</div>

Horizontal

OR

Example Code

html
<div class="divider divider-horizontal">OR</div>

Start Text

OR

Example Code

html
<div class="flex items-center gap-1">
    OR
    <div class="divider divider-horizontal w-full"></div>
</div>

End Text

OR

Example Code

html
<div class="flex items-center gap-1">

    <div class="divider divider-horizontal w-full"></div>
    OR

</div>

With Container

Default
Default

Example Code

html
<div class="flex w-full justify-center gap-4">
    <div class="card max-w-full items-center justify-center">Default</div>
    <div class="divider divider-vertical mx-0 h-44"></div>
    <div class="card max-w-full items-center justify-center">Default</div>
</div>