dividersBeginner

Section Divider

A thin centered horizontal rule with a label or icon in the middle.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a labeled section divider with Tailwind: a horizontal rule across the page with a centered label (e.g. 'OR') in a small uppercase font on a white background, breaking the line in the middle. Used between sign-in form sections.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/dividers/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-divider
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-3xl p-6 w-full">
<span class="flex items-center">
      <span class="h-px flex-1 bg-gray-300"></span>

      <span class="shrink-0 px-4 text-gray-900">Title goes here</span>

      <span class="h-px flex-1 bg-gray-300"></span>
    </span>
  </div>
</div>