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

854

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

Wave Divider
Wave Divider for sections

Author:
Lautaro Gómez

7 months ago

2.4k
Divider line
Fading divider line

Author:
Dipti narayan

1 year ago

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

Author:
Prajwal Hallale

2 years ago

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

4 months ago

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

Author:
Prashant

2 years ago

11.6k
Double line divider

Author:
Lukas Müller

2 years ago

9.7k
Divider with text
Replacement for <hr> tag

Author:
Lukas Müller

2 years ago

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

4 months ago

816
Content divider with load more button

Author:
Lyra Ravensong

2 years ago

11.6k
Wave divider

Author:
Lukas Müller

2 years ago

12.1k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

2 years ago

9.4k
Background Gradient Button with Hover Effects
The button designed with a gradient background that transitions smoothly between three colors

Author:
Kavita Joshi

1 year ago

7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components