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

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

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

1 year ago

3.1k
Wave Divider
Wave Divider for sections

Author:
Lautaro Gómez

1 year ago

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

Author:
Prashant

3 years ago

13.3k
Divider line
Fading divider line

Author:
Dipti narayan

2 years ago

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

Author:
Prajwal Hallale

3 years ago

9.2k
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

1 year ago

1.9k
Divider with text
Replacement for <hr> tag

Author:
Lukas Müller

2 years ago

11.9k
Double line divider

Author:
Lukas Müller

2 years ago

10.4k
Content divider with load more button

Author:
Lyra Ravensong

2 years ago

12.6k
Wave divider

Author:
Lukas Müller

2 years ago

14k
Horizantal and Vertical Divider With Text Using Tailwind CSS

Author:
Shailesh

8 months ago

1.1k
Elegant Avatars
Useful Tailwind classes for constructing avatars with status markers. Comes with an example edit/preview avatar for the user to choose an image with the file chooser.

Author:
Nick Girga

7 months ago

375

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components