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

15.6k

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

2 years ago

50.4k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

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

3 years ago

15k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

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

2 years ago

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

Author:
Prajwal Hallale

2 years ago

22k
Music Player

Author:
Abhijit Sen

3 years ago

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

2 years ago

11.7k
Simple count down timer

Author:
Gopi Yadav

3 years ago

15.3k
Fancy underline

Author:
Simon Scheffer

3 years ago

12.5k
Responsive CTA

Author:
Lukas Müller

3 years ago

10.1k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

3 years ago

14.5k
Upvote downvote buttons

Author:
Lucas Martinez

3 years ago

11.7k
Product hunt showcase

Author:
Lukas Müller

3 years ago

12.3k
Responsive fullscreen youtube video

Author:
Anonymous

2 years ago

8.9k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

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

Author:
Alok

2 years ago

18.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components