Tailwind CSS Divider Line Example

Divider lines help to keep web pages neat and organized. Using Tailwind CSS, you can create nice-looking horizontal and vertical lines easily.

In this guide, we’ll show you how to add simple divider lines to your designs using Tailwind CSS. You’ll learn how to make your web pages look cleaner with these lines.

1. Creates a divider using a small height (h-px) and background color. The outer div adds padding around the line.

<div class="p-4">
  <div class="h-px bg-gray-300"></div>
</div>

2. Native <hr> element, removing its default border and using height and background color instead.

<hr class="my-8 h-px border-0 bg-blue-600">

3. Using divide-x with Tailwind CSS creates vertical dividers between flex items.

<div class="flex divide-x divide-gray-300">
  <div class="px-4">Section 1</div>
  <div class="px-4">Section 2</div>
  <div class="px-4">Section 3</div>
</div>

4. Show various ways to style borders, including changing thickness, color, and style.

<!-- Styled horizontal line -->
<div class="border-t-2 border-blue-500 my-4"></div>

<!-- Bold border -->
<div class="border-t-4 border-red-600 my-4"></div>

<!-- Dashed line -->
<div class="border-t-2 border-dashed border-green-500 my-4"></div>

<!-- Dotted line -->
<div class="border-t-2 border-dotted border-purple-500 my-4"></div>

5. Combine multiple elements to create a styled divider with centered text.

<div class="flex items-center my-8">
  <div class="flex-grow">
    <hr class="border-t-2 border-indigo-500">
  </div>
  <span class="px-4 text-indigo-500 font-bold">OR</span>
  <div class="flex-grow">
    <hr class="border-t-2 border-indigo-500">
  </div>
</div>

6. Create divider line with svg icon.

<div class="flex items-center">
  <div class="flex-grow border-t border-gray-300"></div>
  <div class="flex-shrink-0 mx-4">
    <svg class="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
    </svg>
  </div>
  <div class="flex-grow border-t border-gray-300"></div>
</div>

saim ansari