Divider

<div class="ws-divider mx-auto max-w-2xl space-y-10 py-12">

  <!-- Simple line -->
  <div>
    <p class="mb-4 text-xs font-medium uppercase tracking-wider text-slate-400">Simple</p>
    <div class="rounded-lg border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Content above the divider.</p>
      <hr class="my-6 border-t border-slate-200" />
      <p class="text-sm text-slate-600">Content below the divider.</p>
    </div>
  </div>

  <!-- With label -->
  <div>
    <p class="mb-4 text-xs font-medium uppercase tracking-wider text-slate-400">With label</p>
    <div class="rounded-lg border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Sign in with your account credentials.</p>
      <div class="relative my-6">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-slate-200"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="bg-[var(--ws-color-surface)] px-3 text-sm text-slate-400">or continue with</span>
        </div>
      </div>
      <p class="text-sm text-slate-600">Use a social login provider instead.</p>
    </div>
  </div>

  <!-- With icon -->
  <div>
    <p class="mb-4 text-xs font-medium uppercase tracking-wider text-slate-400">With icon</p>
    <div class="rounded-lg border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Featured articles above.</p>
      <div class="relative my-6">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-slate-200"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="bg-[var(--ws-color-surface)] px-3 text-slate-300">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd"/></svg>
          </span>
        </div>
      </div>
      <p class="text-sm text-slate-600">More articles below.</p>
    </div>
  </div>

  <!-- Dashed -->
  <div>
    <p class="mb-4 text-xs font-medium uppercase tracking-wider text-slate-400">Dashed</p>
    <div class="rounded-lg border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Section one content.</p>
      <hr class="my-6 border-t border-dashed border-slate-300" />
      <p class="text-sm text-slate-600">Section two content.</p>
    </div>
  </div>

  <!-- Thick accent -->
  <div>
    <p class="mb-4 text-xs font-medium uppercase tracking-wider text-slate-400">Accent</p>
    <div class="rounded-lg border border-slate-200 p-6">
      <p class="text-sm text-slate-600">Primary content area.</p>
      <hr class="my-6 h-0.5 border-0 bg-indigo-600" />
      <p class="text-sm text-slate-600">Secondary content area.</p>
    </div>
  </div>

</div>