Home
MD Fardous Alom
pages / slides

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 CSS v3. It is responsive. It supports dark mode.

Other Widget

Author MD Fardous Alom

523

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

Author:
Gopi Yadav

2 years ago

14.6k
Sticky fullpage pages / slides

Author:
Laurits

1 year ago

14.3k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

11 months ago

1.8k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

8 months ago

1.5k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

2 months ago

571
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

3 months ago

463
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

1 week ago

32
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.1k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

13.4k
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

9.2k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

3 months ago

540
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Author:
Komal Jain

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components