Paragraph Divider

Section Divider

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

Divider

Author Orson Kincaid

Tailwind v3.4 2.4k 10

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 section
Divider to mark the end or to start a new section.

Prajwal Hallale

4 years ago

9.3k
Horizantal and Vertical Divider With Text Using Tailwind CSS

Shailesh

1 year ago

1.8k
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.

Anum Shahana

2 years ago

2.8k
Divider with text
Replacement for <hr> tag

Lukas Müller

3 years ago

12.5k
Double line divider

Lukas Müller

3 years ago

11k
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.

Anum Shahana

2 years ago

4.1k
Content divider with load more button

Lyra Ravensong

3 years ago

13.2k
Wave divider

Lukas Müller

3 years ago

15k
Wave Divider
Wave Divider for sections

Lautaro Gómez

2 years ago

4.7k
Divider line
Fading divider line

Dipti narayan

3 years ago

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

Prashant

4 years ago

14.2k
Twitter Testimonials Showcase with Tailwind CSS

EliteAI Tools

1 year ago

1.7k