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.

Other Widget

Author MD Fardous Alom

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

Hasan AlDoy (McDoy)

1 year ago

1.9k
Sticky fullpage pages / slides
Sticky full page

harinandana

10 months ago

972
3D Count downer

Hasan AlDoy (McDoy)

4 months ago

318
Irish Destination
For Irish road signs Destination

Allynn Alvarico

5 months ago

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

Akmaljon Muhammadjonov

1 year ago

1.7k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

4 weeks ago

25