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.

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

Laurits

3 years ago

16.6k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3k
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

11 months ago

1k
3D Count downer

Hasan AlDoy (McDoy)

5 months ago

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

Omer fils ELENGA

6 days ago

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

Omer fils ELENGA

6 days ago

16
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Musawer Shah

11 months ago

853
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.6k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

791

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.