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

1.9k

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

Paragraph Divider
Section Divider

Author:
Orson Kincaid

2 months ago

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

Author:
Prashant

2 years ago

11k
Wave divider

Author:
Lukas Müller

1 year ago

11.3k
Divider with text
Replacement for <hr> tag

Author:
Lukas Müller

1 year ago

10.2k
Content divider with load more button

Author:
Lyra Ravensong

1 year ago

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

2 months ago

861
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

2 months ago

439
Divider line
Fading divider line

Author:
Dipti narayan

1 year ago

12.2k
Double line divider

Author:
Lukas Müller

1 year ago

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

Author:
Prajwal Hallale

2 years ago

8.9k
Buttons with shadow

Author:
Leon Bachmann

1 year ago

9.7k
Heading design

Author:
Emily Tan

1 year ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components