Home
Laurits
Sticky fullpage pages / slides

Sticky fullpage pages / slides

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

Other Widget

Author Laurits

14.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

background animation
background animation

Author:
Anonymous

1 year ago

42.8k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

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

Author:
Prashant

2 years ago

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

Author:
Samuel Dawson

1 year ago

18.5k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

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

Author:
Prajwal Hallale

2 years ago

21k
Music Player

Author:
Abhijit Sen

2 years ago

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

Author:
Anonymous

1 year ago

10.6k
Simple count down timer

Author:
Gopi Yadav

2 years ago

14.6k
Fancy underline

Author:
Simon Scheffer

2 years ago

11.3k
Responsive CTA

Author:
Lukas Müller

2 years ago

9.2k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

13.4k
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

10.8k
Product hunt showcase

Author:
Lukas Müller

2 years ago

11.8k
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

8.3k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

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

Author:
Alok

2 years ago

17.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components