Tailwind CSS Dividers and <hr>

Insert a horizontal rule or a thematic break to divide or separate sections.

Example

The <hr> element has been simplified. Similar to browser defaults, <hr>s are styled via border-top.

Control the height of the <hr> with border-width classes.

Left, center and right aligned dividers with label.

Left aligned

Center aligned

Right aligned

Vertically stacked button group with a divider.

Starting from a horizontal position, this text divider example will change to a vertical position on a small desktop.

Reduce browser size to see it in action.