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

3.2k

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

10 months ago

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

10 months ago

1.6k
Content divider with load more button

Author:
Lyra Ravensong

2 years ago

12.3k
Divider with text
Replacement for <hr> tag

Author:
Lukas Müller

2 years ago

11.4k
Divider line
Fading divider line

Author:
Dipti narayan

2 years ago

14k
Wave divider

Author:
Lukas Müller

2 years ago

13.3k
Double line divider

Author:
Lukas Müller

2 years ago

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

Author:
Prajwal Hallale

2 years ago

9.1k
Horizantal and Vertical Divider With Text Using Tailwind CSS

Author:
Shailesh

4 months ago

469
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

10 months ago

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

Author:
Prashant

3 years ago

12.6k
Crafting a Responsive Footer with TypeScript, and Tailwind CSS
This is a well-structured and comprehensive footer section that uses Tailwind CSS for styling and layout. Here’s a brief explanation of what each part does: Footer Container (<footer class="bg-gray-800">): The footer is wrapped in a <footer> element with a dark background using the bg-gray-800 class. The aria-labelledby="footer-heading" attribute is used for accessibility, linking the <footer> to the invisible heading (<h2 id="footer-heading" class="sr-only">Footer</h2>). Main Content Area: The content inside the footer is centered and spaced using utility classes like max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8. Footer Sections: The footer is divided into several sections using grid layouts (xl:grid xl:grid-cols-5 xl:gap-8), which organize content into columns. Each section (Solutions, Support, Company, Legal) contains a heading with a list of links. These links are styled with Tailwind classes for consistent spacing and hover effects (text-base text-gray-300 hover:text-white). Language & Currency Selector: This section provides dropdowns for selecting language and currency. Tailwind's form utilities (@tailwindcss/forms plugin) are used to style the select elements. Newsletter Subscription Form: A subscription form is provided with an email input and a submit button. The form is styled to be responsive, with focus states for accessibility (focus:ring-2 focus:ring-offset-2). Social Media Links: Social media icons (Facebook, Instagram, etc.) are included, each wrapped in a link with hover effects. Icons are created using SVGs, which are scalable and look sharp at any size. Final Section: The footer concludes with another grid layout, ensuring spacing and alignment for different screen sizes. Customization Tips: Colors: You can easily customize the colors using Tailwind's utility classes (e.g., bg-gray-800, text-gray-400) to match your design. Icons: Replace SVGs with the appropriate icons for your needs. You might use a different icon set or add more icons. Responsive Design: Tailwind's utility classes like sm:, md:, lg:, xl: ensure that the footer is responsive across devices. Adjust the layout or padding if needed. Additional Considerations: SEO: Ensure the links in the footer point to meaningful pages to improve SEO. Accessibility: Consider adding aria-labels to the form elements and social media links to enhance accessibility further. This footer is ready to be integrated into a Tailwind CSS-powered project, offering both aesthetic appeal and functional utility.

Author:
zobaidul kaziex

11 months ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components