Flexible React Divider Component with Tailwind CSS

A good divider helps break content into sections in a clean way. This React divider component, built with Tailwind CSS, lets you customize it with single or double lines and add text in between. Just copy the code and use it in your project easily!

Divider Component with Single or Double Line

React Multiline Divider Component Code

🎨 Customization Options

• Change Line Style: Modify border-dotted in the component to border-solid or border-dashed for a different look.
• Adjust Thickness: Change border-y-2 or border-t-2 to border-y-4 or border-t-4 for a thicker line.
• Change Color: Override the border-black class with border-gray-500, border-red-500, etc.

Horizontal Divider with Label

React Horizontal Divider with Label Code

🎨 Customization Options

1. Change Line Style

• Replace border-dotted with border-solid or border-dashed for different line styles.

Copy
1<Divider label="OR" dotted={false} />

2. Adjust Line Thickness

• Modify border-t-2 to border-t-4 for a thicker line.

Copy
1<Divider label="OR" className="border-t-4" />

3. Change Text Style

• Customize text color, size, or font using Tailwind classes.

Copy
1<Divider label="OR" className="text-lg font-semibold text-gray-600" />

4. Customize Divider Spacing

• Adjust my-8 for vertical spacing.

Copy
1<Divider label="OR" className="my-4" />

5. Change Line Color

• Replace border-black with border-gray-500 or any Tailwind color.

Copy
1<Divider label="AND" className="border-gray-400" />