Divider Vertical
Content
OR
Content
<div class="flex flex-col">
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
<div class="my-4 flex items-center space-x-3">
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
<p>OR</p>
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
</div>
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
</div>
Without Text
Content
Content
<div class="flex flex-col">
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
<div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
</div>
Divider Horizontal
Content
OR
Content
<div class="flex">
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
<div class="mx-4 flex flex-col items-center space-y-3">
<div class="w-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
<p>OR</p>
<div class="w-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
</div>
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
</div>
Without Text
Content
Content
<div class="flex">
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
<div class="mx-4 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<div
class="flex h-20 w-full items-center justify-center rounded-lg bg-slate-200 dark:bg-navy-500"
>
<p class="text-xl">Content</p>
</div>
</div>