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.2k

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.1k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

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

8 months ago

1.2k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

3 months ago

591
Code card with copy Button
this example uses clipboard.js to copy the code

Author:
Joost Hietbrink

6 months ago

622
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

4 months ago

185
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

157
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Author:
Jerome Soriano

1 year ago

1.6k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

8 months ago

1k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

5 months ago

804

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components