Tailwind CSS Divider Components

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

<div class="flex gap-5 w-full">
    <div class="card card-outline w-full">
       <div class="card-body">content 1</div>
    </div>
    <div class="h-auto">
      <div class="divider divider-y"></div>
    </div>
    <div class="card card-outline w-full">
        <div class="card-body">content 2</div>
    </div>
</div>

<div class="divider divider-x"></div>

<div class="divider divider-x">OR</div>

<div class="flex gap-5 w-full">
    <div class="card card-outline w-full">
       <div class="card-body">content 1</div>
    </div>
    <div class="h-auto">
      <div class="divider divider-y">OR</div>
    </div>
    <div class="card card-outline w-full">
        <div class="card-body">content 2</div>
    </div>
</div>

<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-y divider-start">Start</div>
  <div class="divider divider-y">Default</div>
  <div class="divider divider-y divider-end">End</div>
</div>