Tailwind CSS Dividers

Responsive dividers built with Tailwind CSS. Examples of horizontal divider lines (hr) as well as vertical divider lines for clearer organization of your content. Download for free without registration.

Basic example

HTML

        
            
      <hr class="my-12 h-0.5 border-t-0 bg-neutral-100 dark:bg-white/10" />

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Basic vertical

Text

HTML

        
            
      <div class="flex flex-1">
        <p class="pe-6">Text</p>
        <div
          class="inline-block h-[250px] min-h-[1em] w-0.5 self-stretch bg-neutral-100 dark:bg-white/10"></div>
        <p class="ps-6">Text</p>
      </div>

Blurry horizontal

HTML

        
            
      <hr
        class="my-12 h-px border-t-0 bg-transparent bg-gradient-to-r from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400" />

Blurry vertical

Text

HTML

        
            
      <div class="flex flex-1">
        <p class="pe-6">Text</p>
        <div
          class="h-[250px] min-h-[1em] w-px self-stretch bg-gradient-to-tr from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400"></div>
        <p class="ps-6">Text</p>
      </div>

Blurry divider practical example

Below is an example, of how these blurry dividers are presented within a section:

5000+

Components

490+

Design blocks

100+

Templates

28

Plugins

HTML

        
            
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
        <div class="relative mb-12 px-3 lg:mb-0">
          <div class="mb-2 flex justify-center">
            <span class="text-primary">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="h-14 w-14">
                <path
                  d="M12.378 1.602a.75.75 0 00-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03zM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 00.372-.648V7.93zM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 00.372.648l8.628 5.033z" />
              </svg>
            </span>
          </div>
          <h5 class="mb-6 font-bold text-primary">5000+</h5>
          <h6 class="mb-0 font-normal dark:text-neutral-50">Components</h6>
          <div
            class="absolute right-0 top-0 hidden h-full min-h-[1em] w-px self-stretch border-t-0 bg-gradient-to-tr from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400 lg:block"></div>
        </div>
        <div class="relative mb-12 px-3 lg:mb-0">
          <div class="mb-2 flex justify-center">
            <span class="text-primary">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="h-14 w-14">
                <path
                  d="M11.644 1.59a.75.75 0 01.712 0l9.75 5.25a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.712 0l-9.75-5.25a.75.75 0 010-1.32l9.75-5.25z" />
                <path
                  d="M3.265 10.602l7.668 4.129a2.25 2.25 0 002.134 0l7.668-4.13 1.37.739a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.71 0l-9.75-5.25a.75.75 0 010-1.32l1.37-.738z" />
                <path
                  d="M10.933 19.231l-7.668-4.13-1.37.739a.75.75 0 000 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 000-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 01-2.134-.001z" />
              </svg>
            </span>
          </div>
          <h5 class="mb-6 font-bold text-primary">490+</h5>
          <h6 class="mb-0 font-normal dark:text-neutral-50">Design blocks</h6>
          <div
            class="absolute right-0 top-0 hidden h-full min-h-[1em] w-px self-stretch border-t-0 bg-gradient-to-tr from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400 lg:block"></div>
        </div>
        <div class="relative mb-12 px-3 lg:mb-0">
          <div class="mb-2 flex justify-center">
            <span class="text-primary">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="h-14 w-14">
                <path
                  fill-rule="evenodd"
                  d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
          <h5 class="mb-6 font-bold text-primary">100+</h5>
          <h6 class="mb-0 font-normal dark:text-neutral-50">Templates</h6>
          <div
            class="absolute right-0 top-0 hidden h-full min-h-[1em] w-px self-stretch border-t-0 bg-gradient-to-tr from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400 lg:block"></div>
        </div>
        <div class="relative mb-12 px-3 lg:mb-0">
          <div class="mb-2 flex justify-center">
            <span class="text-primary">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="h-14 w-14">
                <path
                  fill-rule="evenodd"
                  d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
                  clip-rule="evenodd" />
              </svg>
            </span>
          </div>
          <h5 class="mb-6 font-bold text-primary">28</h5>
          <h6 class="mb-0 font-normal dark:text-neutral-50">Plugins</h6>
        </div>
      </div>

Dividers

Basic example

Basic vertical

Blurry horizontal

Blurry vertical

Blurry divider practical example

5000+

Components

490+

Design blocks

100+

Templates

28

Plugins

Access restricted

To view this section you must have an active PRO account

Dividers

Tailwind CSS Dividers

Basic example

Basic vertical

Blurry horizontal

Blurry vertical

Blurry divider practical example

5000+

Components

490+

Design blocks

100+

Templates

28

Plugins

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):