1. Components
  2. Dividers and <hr>


Tailwind CSS Dividers and <hr>

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


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.


With label

Left, center and right aligned dividers with label.

Left aligned
Center aligned
Right aligned

Vertical button group with label

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.