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)

1.3k

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

15k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.2k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

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

Author:
Ameth Galarcio

1 year ago

1.8k
pages / slides

Author:
MD Fardous Alom

9 months ago

1.2k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Sticky fullpage pages / slides
Sticky full page

Author:
harinandana

1 week ago

42
Age verification 18+

Author:
Maxim

10 months ago

909
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

1 month ago

240
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

8 months ago

1.6k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

18.4k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components