pages / slides

Forked from @laurits/sticky-fullpage-pages-slides

This tailwind example is contributed by MD Fardous Alom, on 16-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Other Widget

Author MD Fardous Alom

Tailwind v3.4 2.3k 5

Fork Fullscreen

<div class="relative">
    <div class="sticky top-0 h-screen flex flex-col items-center justify-center bg-gradient-to-b from-green-200 to-blue-200">
        <h2 class="text-4xl font-bold">The First slide</h2>
        <p class="mt-2">Scroll Down now for next slide</p>
    </div>
    <div class="sticky top-0 h-screen flex flex-col items-center justify-center bg-gradient-to-b from-indigo-800 to-purple-800 text-white">
        <h2 class="text-4xl font-bold">The Second slide</h2>
        <p class="mt-2">Scroll Down for next slide</p>
    </div>
    <div class="sticky top-0 h-screen flex flex-col items-center justify-center bg-gradient-to-b from-purple-800 to-pink-800 text-white">
        <h2 class="text-4xl font-bold">The Third slide</h2>
        <p class="mt-2">Scroll Down</p>
    </div>
    <div class="sticky top-0 h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-200 to-indigo-100 text-black">
        <h2 class="text-4xl font-bold">The Fourth slide</h2>
    </div>
</div>

Related Examples

Simple count down timer

Gopi Yadav

3 years ago

15.6k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3.1k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

2k
Sticky fullpage pages / slides
Sticky full page

harinandana

1 year ago

1k
3D Count downer

Hasan AlDoy (McDoy)

6 months ago

321
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

3 weeks ago

98
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

3 weeks ago

24
Contact Page

Sedat Kumcu

2 years ago

2.1k
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Gidy Official

11 months ago

668
Neon container

Anonymous

2 years ago

4.4k