Home
Hasan AlDoy (McDoy)
Sticky fullpage pages / slides

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 CSS v3. It is responsive.

Other Widget

Author Hasan AlDoy (McDoy)

476

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

Author:
Gopi Yadav

2 years ago

14.5k
Sticky fullpage pages / slides

Author:
Laurits

1 year ago

14.2k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

11 months ago

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

Author:
Ameth Galarcio

8 months ago

1.5k
pages / slides

Author:
MD Fardous Alom

2 months ago

514
Your upside-down text

Author:
Isabella Kowalski

2 years ago

12.1k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

1 month ago

345
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

10.6k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

1 day ago

51
Full Page loading overlay

Author:
Bunny

2 years ago

11.1k
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

Author:
S. Patel

2 years ago

8.8k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

5 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components