Home
Orson Kincaid
Paragraph Divider

Paragraph Divider

Section Divider

This tailwind example is contributed by Orson Kincaid, on 03-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is HR

Divider

Author Orson Kincaid

666

Fork Fullscreen

<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl mx-auto px-4 py-8">
    <div class="relative">
      <div class="absolute inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
      </div>
      <div class="relative flex justify-center">
        <span class="px-3 bg-gray-100 dark:bg-gray-800 text-lg font-medium text-gray-900 dark:text-gray-100">
          Section Divider
        </span>
      </div>
    </div>

<div class="mt-8 text-center">
      <p class="text-gray-600 dark:text-gray-400 mb-4">
        This is the content of the first paragraph. You can add your text here.
        The divider above separates this section from the previous content.
      </p>
      <p class="text-gray-600 dark:text-gray-400">
        This is the second paragraph. The beautiful divider above helps to
        organize your content and improve readability.
      </p>
    </div>
  </div>
</div>

Related Examples

Divider line
Fading divider line

Author:
Dipti narayan

1 year ago

12.6k
Content divider with load more button

Author:
Lyra Ravensong

1 year ago

11.3k
Divider with text
Replacement for <hr> tag

Author:
Lukas Müller

2 years ago

10.5k
Double line divider

Author:
Lukas Müller

1 year ago

9.5k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Author:
Anum Shahana

3 months ago

731
Wave divider

Author:
Lukas Müller

1 year ago

11.8k
Wave Divider
Wave Divider for sections

Author:
Lautaro Gómez

6 months ago

2.2k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

3 months ago

1.3k
Divider section
Divider to mark the end or to start a new section.

Author:
Prajwal Hallale

2 years ago

9k
Section Divider
Inspired from https://tailwindflex.com/prajwal/divider-section

Author:
Prashant

2 years ago

11.1k
Social share icons

Author:
Amit Pachange

2 years ago

11.9k
Large File upload input

Author:
Akshay

2 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components