Components
Tailwind CSS Dividers - Madhuranjan UI
Explore a collection of stylish and functional dividers or HR built with Tailwind CSS. These dividers enhance content separation, improve readability, and add visual appeal. From basic lines to stylish gradient effects, each divider is fully responsive and supports both light and dark themes.
Basic Divider
Basic dividers are simple yet effective horizontal rules that create clear separations between sections. They include solid, dashed, and dotted lines, ensuring a clean and minimalistic look. Some variations also integrate subtle gradient effects and labeled dividers, enhancing readability while maintaining a professional design.
1
2 <div class="border-t-2 border-dashed border-gray-400 dark:border-gray-500 my-4"></div>
3 <div class="border-t border-gray-300 dark:border-gray-600 my-4"></div>
4 <div class="border-t-2 border-dotted border-gray-400 dark:border-gray-500 my-4"></div>
5 <div class="h-1 w-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 my-4"></div>
6
7 <div class="flex items-center my-4">
8 <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
9 <span class="px-3 text-gray-500 dark:text-gray-400 text-sm">OR</span>
10 <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>SVG Dividers
SVG dividers add a stylish and modern touch to your website's design. These dividers use fluid, wave-like, and zigzag patterns that blend seamlessly with different sections. They are excellent for dynamic UI elements and provide a visually appealing transition between content blocks.
1 <svg
2 className="w-full h-16 md:h-24 lg:h-32 text-gray-300 dark:text-gray-600 my-4"
3 xmlns="http://www.w3.org/2000/svg"
4 viewBox="0 0 1440 320"
5 preserveAspectRatio="none"
6 >
7 <path
8 fill="currentColor"
9 d="M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,181.3C672,171,768,181,864,170.7C960,160,1056,128,1152,138.7C1248,149,1344,203,1392,229.3L1440,256V320H0Z"
10 ></path>Stylish Dividers
Stylish dividers go beyond basic lines, incorporating creative elements like small shapes, gradient effects, and embedded text. They offer a unique way to break content while keeping users engaged. These dividers are ideal for modern web designs that require a sleek and aesthetically pleasing structure.
1<div class="my-6 flex items-center justify-center">
2 <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
3 <div class="mx-4 h-3 w-3 rotate-45 bg-gray-300 dark:bg-gray-600"></div>
4 <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
5</div>
6
7<div class="relative my-6 h-2 w-full bg-gradient-to-r from-transparent via-gray-400 to-transparent dark:via-gray-600">
8 <div class="absolute inset-0 opacity-50 blur-lg"></div>
9</div>
10