Home
Lautaro Gómez
Wave Divider

Wave Divider

Wave Divider for sections

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

Divider

Author Lautaro Gómez

4.1k

7

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>

<div class="wave-divider dark:bg-gray-800">
  <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
    <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-blue-100 dark:fill-blue-900"></path>
  </svg>
</div>

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

<style>
  .wave-divider {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
  }

.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

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

Author:
Prajwal Hallale

3 years ago

9.2k
Double line divider

Author:
Lukas Müller

2 years ago

10.4k
Horizantal and Vertical Divider With Text Using Tailwind CSS

Author:
Shailesh

10 months ago

1.1k
Divider with text
Replacement for <hr> tag

Author:
Lukas Müller

3 years ago

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

Author:
Prashant

3 years ago

13.5k
Content divider with load more button

Author:
Lyra Ravensong

2 years ago

12.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.

Author:
Anum Shahana

1 year ago

1.9k
Divider line
Fading divider line

Author:
Dipti narayan

2 years ago

14.9k
Paragraph Divider
Section Divider

Author:
Orson Kincaid

1 year ago

2.1k
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.2k
Wave divider

Author:
Lukas Müller

2 years ago

14.1k
Card with social media share buttons

Author:
Computer guy

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12