Wave Divider

Wave Divider for sections

This tailwind example is contributed by Lautaro Gómez, on 03-Aug-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is HR

Divider

Author Lautaro Gómez

Tailwind v3.4 4.7k 10

Fork Fullscreen

<section class="bg-blue-100 dark:bg-blue-900 py-12 sm:py-20">
  <div class="container mx-auto px-4">
    <h2 class="text-2xl sm:text-3xl font-bold text-center mb-4 sm:mb-8 dark:text-white">Section 1</h2>
    <p class="text-center text-gray-700 dark:text-gray-200">This is the content of section 1.</p>
  </div>
</section>

<section class="bg-white dark:bg-gray-800 py-12 sm:py-20">
  <div class="container mx-auto px-4">
    <h2 class="text-2xl sm:text-3xl font-bold text-center mb-4 sm:mb-8 dark:text-white">Section 2</h2>
    <p class="text-center text-gray-700 dark:text-gray-300">This is the content of section 2.</p>
  </div>
</section>

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
  }

@media (min-width: 768px) {
    .wave-divider svg {
      height: 150px;
    }
  }
</style>

Related Examples

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

1 year ago

2.8k
Content divider with load more button

Lyra Ravensong

3 years ago

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

Prajwal Hallale

3 years ago

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

1 year ago

4k
Paragraph Divider
Section Divider

Orson Kincaid

1 year ago

2.4k
Wave divider

Lukas Müller

3 years ago

14.9k
Horizantal and Vertical Divider With Text Using Tailwind CSS

Shailesh

1 year ago

1.8k
Divider with text
Replacement for <hr> tag

Lukas Müller

3 years ago

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

Prashant

4 years ago

14.2k
Double line divider

Lukas Müller

3 years ago

11k
Divider line
Fading divider line

Dipti narayan

3 years ago

15.4k
Footer - Modern minimal style
clean and uncluttered, following a minimalist approach

Nikita

2 years ago

4.8k