Components
Tailwind CSS Dividers
Dividers are built with Tailwind CSS. Examples of horizontal divider lines for clearer organization of your content.
Default Dividers
Use this free example to display label with dividers.
Notification
<div class="flex w-full items-center rounded-full">
<div class="flex-1 border-b border-gray-300"></div>
<span class="text-black text-lg font-semibold leading-8 px-8 py-3">Notification</span>
<div class="flex-1 border-b border-gray-300"></div>
</div>With label
Use this free example to display center aligned label with dividers.
Today
<div class="flex w-full items-center rounded-full">
<div class="flex-1 border-b border-gray-300"></div>
<span class="text-black text-lg font-semibold leading-8 px-8 py-3">Today</span>
<div class="flex-1 border-b border-gray-300"></div>
</div>With button
Use this free example to display with svg icon and label.
<div class="flex w-full items-center">
<div class="flex-1 border-b border-gray-300"></div>
<button class="px-6 py-3 flex items-center bg-white rounded-full shadow-sm border border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22" fill="none">
<g id="Add">
<path id="icon" d="M11.5 5.5V16.5M17 11H6" stroke="black" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
<span class="text-black text-lg font-semibold leading-relaxed px-2">Add</span>
</button>
<div class="flex-1 border-b border-gray-300"></div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
With Navigation
Use this free example to display dividers with arrow sign.
<div class="flex w-full items-center rounded-full h-14">
<div class="flex-1 border-b border-gray-300"></div>
<button class="rounded-full border border-gray-300 flex items-center justify-center">
<div class="group px-6 py-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Right arrow 5">
<path id="icon" d="M9.22286 16.6125L3.66663 11.0562M3.66663 11.0562L9.22286 5.5M3.66663 11.0562H20.1665" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</div>
<div class="outline-none border-x-2 border-gray-300 text-lg py-4 px-6">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Right arrow 5">
<path id="icon" d="M11 5.5V16.5M16.5 11H5.5" stroke="black" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
</div>
<div class="group px-6 py-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Right arrow 5">
<path id="icon" d="M12.777 5.5L18.3333 11.0562M18.3333 11.0562L12.777 16.6125M18.3333 11.0562L1.83337 11.0562" stroke="black" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
</div>
</button>
<div class="flex-1 border-b border-gray-300"></div>
</div>With Active Stats
Use this free example to display link with Dividers.
<div class="flex w-full items-center rounded-full h-14">
<div class="flex-1 border-b border-gray-300"></div>
<button class="flex items-center justify-center rounded-full border border-gray-300">
<div class="group px-6 py-4 flex items-center justify-center">
<span class="text-black text-lg font-semibold leading-7">View all</span>
</div>
<div class="border-x-2 border-gray-300 outline-none text-lg py-4 px-6">
<span class="text-black text-lg font-semibold leading-7">Active </span>
</div>
<div class="group px-6 py-4 flex items-center justify-center">
<span class="text-black text-lg font-semibold leading-7">In Active</span>
</div>
</button>
<div class="flex-1 border-b border-gray-300"></div>
</div>With icon
Use this free example to display SVG icon Dividers.
<div class="flex w-full items-center rounded-full h-14">
<div class="flex-1 border-b border-gray-300"></div>
<div class="w-12 h-12 flex items-center justify-center bg-white rounded-full shadow border border-gray-300 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Add">
<path id="icon" d="M11 5.5V16.5M16.5 11H5.5" stroke="black" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
</div>
<div class="flex-1 border-b border-gray-300"></div>
</div>with different styles
Use this free example to display label with different styles.
Notification
Today
<div class="w-full grid gap-8">
<div class="flex w-full items-center rounded-full">
<div class="flex-1 border-b border-indigo-600"></div>
<span class="text-indigo-600 text-lg font-semibold leading-8 px-8 py-3">Notification</span>
<div class="flex-1 border-b border-indigo-600"></div>
</div>
<div class="flex w-full items-center rounded-full">
<div class="flex-1 border-b border-indigo-600"></div>
<span class="text-indigo-600 text-lg font-semibold leading-8 px-8 py-3">Today</span>
<div class="flex-1 border-b border-indigo-600"></div>
</div>
<div class="flex w-full items-center">
<div class="flex-1 border-b border-indigo-600"></div>
<button class="px-6 py-3 flex items-center bg-indigo-600 rounded-xl shadow-sm border border-indigo-600">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="22" viewBox="0 0 23 22" fill="none">
<g id="Add">
<path id="icon" d="M11.5 5.5V16.5M17 11H6" stroke="white" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
<span class="text-white text-lg font-semibold leading-relaxed px-2">Add</span>
</button>
<div class="flex-1 border-b border-indigo-600"></div>
</div>
<div class="flex w-full items-center rounded-full h-14">
<div class="flex-1 border-b border-indigo-600"></div>
<button class="rounded-full flex items-center justify-center bg-indigo-600 border-indigo-600 border">
<div class="group px-6 py-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Right arrow 5">
<path id="icon" d="M9.22286 16.6125L3.66663 11.0562M3.66663 11.0562L9.22286 5.5M3.66663 11.0562H20.1665" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</div>
<div class="border-white border-x-2 outline-none text-lg py-4 px-6">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Right arrow 5">
<path id="icon" d="M11 5.5V16.5M16.5 11H5.5" stroke="white" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
</div>
<div class="group px-6 py-4 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Right arrow 5">
<path id="icon" d="M12.777 5.5L18.3333 11.0562M18.3333 11.0562L12.777 16.6125M18.3333 11.0562L1.83337 11.0562" stroke="white" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
</div>
</button>
<div class="flex-1 border-b border-indigo-600"></div>
</div>
<div class="flex w-full items-center rounded-full h-14">
<div class="flex-1 border-b border-indigo-600"></div>
<button class="rounded-full bg-indigo-600 border border-indigo-600 flex items-center justify-center">
<div class="group px-6 py-4 ">
<span class="text-white text-lg font-semibold leading-7">View all</span>
</div>
<div class="outline-none border-x-2 border-white text-lg py-4 px-6">
<span class="text-white text-lg font-semibold leading-7">Active </span>
</div>
<div class="px-6 py-4 flex items-center justify-center">
<span class="text-white text-lg font-semibold leading-7">In Active</span>
</div>
</button>
<div class="flex-1 border-b border-indigo-600"></div>
</div>
<div class="flex w-full items-center h-14">
<div class="flex-1 border-b border-indigo-600"></div>
<div class="w-12 h-12 flex items-center justify-center bg-indigo-600 rounded-xl shadow-sm border border-indigo-600 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
<g id="Add">
<path id="icon" d="M11 5.5V16.5M16.5 11H5.5" stroke="white" stroke-width="1.6" stroke-linecap="round" />
</g>
</svg>
</div>
<div class="flex-1 border-b border-indigo-600"></div>
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More