Sticky fullpage pages / slides

This tailwind example is contributed by Laurits, on 21-May-2023. Component is made with Tailwind v3.4. It is responsive.

Other Widget

Author Laurits

Tailwind v3.4 16.6k 33

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

background animation
background animation

Anonymous

3 years ago

53.1k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.6k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Prashant

4 years ago

15.6k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.5k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22.1k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Prajwal Hallale

3 years ago

22.2k
Music Player

Abhijit Sen

3 years ago

18.5k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Anonymous

3 years ago

12.2k
Simple count down timer

Gopi Yadav

3 years ago

15.6k
Fancy underline

Simon Scheffer

3 years ago

13.3k
Responsive CTA

Lukas Müller

3 years ago

10.5k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.3k
Upvote downvote buttons

Lucas Martinez

3 years ago

12.6k
Product hunt showcase

Lukas Müller

3 years ago

13k
Responsive fullscreen youtube video

Anonymous

3 years ago

9.5k
Privacy policy page template

Sameer Sultana

3 years ago

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

Alok

3 years ago

19.3k