Tailwind CSS Dividers and <hr>

Separate content with Tailwind CSS dividers, labeled separators, vertical rules, and responsive layouts.

Example

Use the <hr> element to create simple horizontal dividers. By default, it is styled with a top border.

Control divider thickness on <hr> elements with border-width utilities.

Create left-, center-, and right-aligned dividers with labels.

Left aligned

Center aligned

Right aligned

Separate vertically stacked button groups with a labeled divider.

This divider starts horizontally and switches to a vertical layout from the sm breakpoint up.

Reduce browser size to see it in action.