Divider

A Divider is basically a thin horizontal line that separates content areas.

Similar to Spacers, Dividers provide consistent vertical spacing while also offering visual separation of your content.

To create a Divider, we can use a regular <hr> element:

<hr class="border-0 bg-gray-500 text-gray-500 h-px">

How it works

1. We first reset the border-width, so we can apply our own colors
2. We use a combination of background-color and color - the latter is for Outlook (Windows)
3. Removing the border means the element now has no height, so we use h-px to set it to 1px

Customization

You can customize the divider and give it a custom width or height, change its color, the top/bottom space around it, and even its alignment.

Width

An <hr> goes full width by default, but we can set a custom width.

Let's also use max-w-full, to make it responsive:

// tailwind.config.js
module.exports = {
  spacing: {
    // ...,
    '400': '400px',
  }
}

<hr class="border-0 bg-gray-500 text-gray-500 h-px w-400 max-w-full">

Need a custom width for mobile devices? Use the sm breakpoint:

<hr class="border-0 bg-gray-500 text-gray-500 h-px sm:w-64">

Margin

You can customize top and bottom spacing with CSS margins.

For example, let's add 32px to the top and bottom:

<hr class="border-0 bg-gray-500 text-gray-500 h-px my-32">

Need uneven spacing?

<hr class="border-0 bg-gray-500 text-gray-500 h-px mt-16 mb-32">

Alignment

You can use the align attribute to align a Divider.

<hr align="right" class="border-0 bg-gray-500 text-gray-500 h-px mt-16 mb-32">

By default, it will be centered.

Vertical

For a vertical Divider, simply use a narrow width and a bigger height:

<hr class="border-0 bg-gray-500 text-gray-500 w-px h-64 m-0">

Other notes

This page initially documented table-based Dividers.

We are now recommending an <hr>-based Divider, following Mark Robbins' excellent goodemailcode.com examples.