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

12.7k

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

35.6k
Typewriter effect
using javascript

Author:
Samuel Dawson

1 year ago

32.5k
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.1k
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

15.7k
Google map iframe with tailwind

Author:
Kofi Osei

1 year ago

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

Author:
Prajwal Hallale

1 year ago

19.6k
Music Player

Author:
Abhijit Sen

1 year ago

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

9.3k
Simple count down timer

Author:
Gopi Yadav

1 year ago

13.9k
Fancy underline

Author:
Simon Scheffer

1 year ago

10k
Responsive CTA

Author:
Lukas Müller

1 year ago

8.1k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

12.3k
Upvote downvote buttons

Author:
Lucas Martinez

1 year ago

10.2k
Product hunt showcase

Author:
Lukas Müller

1 year ago

11.1k
Responsive fullscreen youtube video

Author:
Anonymous

1 year ago

7.6k
Privacy policy page template

Author:
Sameer Sultana

1 year ago

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

Author:
Alok

1 year ago

15.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent