Sticky fullpage pages / slides

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

This tailwind example is contributed by Hasan AlDoy (McDoy), on 20-Jan-2025. Component is made with Tailwind v3.4. It is responsive.

Other Widget

Author Hasan AlDoy (McDoy)

Tailwind v3.4 2k 2

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 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.7k
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
pages / slides

MD Fardous Alom

1 year ago

2.3k
Sticky fullpage pages / slides
Sticky full page

harinandana

1 year ago

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

1 month ago

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

Omer fils ELENGA

1 month ago

25
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Abhiraj

1 year ago

3k
Responsive fullscreen youtube video

Anonymous

3 years ago

9.5k
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

SAURAV SINGH

1 year ago

1.5k