Home
harinandana
Sticky fullpage pages / slides

Sticky fullpage pages / slides

Sticky full page

This tailwind example is contributed by harinandana, on 24-Oct-2025. Component is made with Tailwind CSS v3. It is responsive.

Other Widget

Author harinandana

12

Fork Fullscreen

<div class="relative">
  
  <div class="sticky top-0 h-screen flex items-center justify-center bg-white">
    <div class="w-3/4 max-w-4xl bg-black text-white p-6 rounded-xl shadow-xl flex flex-row items-center justify-between">
      
      
      <div class="w-1/2 flex justify-center">
        <img src="https://via.placeholder.com/300" alt="Slide 1 Image" class="rounded-lg object-cover h-64 w-64" />
      </div>

<div class="w-1/2 flex flex-col justify-between h-64">
        <div>
          <h2 class="text-3xl font-bold mb-4">Slide 1 Card</h2>
          <p class="text-base">
            This is a black card on a white slide background. The left side has an image, the right side has text content, and a button is at the bottom.
          </p>
        </div>
        <div class="flex justify-end mt-4">
          <button class="bg-white text-black px-6 py-2 rounded-lg hover:bg-gray-200">
            Visit Site
          </button>
        </div>
      </div>

</div>
  </div>

<div class="sticky top-0 h-screen flex items-center justify-center bg-white">
    <div class="w-3/4 max-w-4xl bg-black text-white p-6 rounded-xl shadow-xl flex flex-row items-center justify-between">
      
      
      <div class="w-1/2 flex justify-center">
        <img src="https://via.placeholder.com/300" alt="Slide 1 Image" class="rounded-lg object-cover h-64 w-64" />
      </div>

<div class="w-1/2 flex flex-col justify-between h-64">
        <div>
          <h2 class="text-3xl font-bold mb-4">Slide 1 Card</h2>
          <p class="text-base">
            This is a black card on a white slide background. The left side has an image, the right side has text content, and a button is at the bottom.
          </p>
        </div>
        <div class="flex justify-end mt-4">
          <button class="bg-white text-black px-6 py-2 rounded-lg hover:bg-gray-200">
            Visit Site
          </button>
        </div>
      </div>

</div>
  </div>

<div class="sticky top-0 h-screen flex items-center justify-center bg-white">
    <div class="w-3/4 max-w-4xl bg-black text-white p-6 rounded-xl shadow-xl flex flex-row items-center justify-between">
      
      
      <div class="w-1/2 flex justify-center">
        <img src="https://via.placeholder.com/300" alt="Slide 1 Image" class="rounded-lg object-cover h-64 w-64" />
      </div>

<div class="w-1/2 flex flex-col justify-between h-64">
        <div>
          <h2 class="text-3xl font-bold mb-4">Slide 1 Card</h2>
          <p class="text-base">
            This is a black card on a white slide background. The left side has an image, the right side has text content, and a button is at the bottom.
          </p>
        </div>
        <div class="flex justify-end mt-4">
          <button class="bg-white text-black px-6 py-2 rounded-lg hover:bg-gray-200">
            Visit Site
          </button>
        </div>
      </div>

</div>
  </div>

<div class="sticky top-0 h-screen flex items-center justify-center bg-white">
    <div class="w-3/4 max-w-4xl bg-black text-white p-6 rounded-xl shadow-xl flex flex-row items-center justify-between">
      
      
      <div class="w-1/2 flex justify-center">
        <img src="https://via.placeholder.com/300" alt="Slide 1 Image" class="rounded-lg object-cover h-64 w-64" />
      </div>

<div class="w-1/2 flex flex-col justify-between h-64">
        <div>
          <h2 class="text-3xl font-bold mb-4">Slide 1 Card</h2>
          <p class="text-base">
            This is a black card on a white slide background. The left side has an image, the right side has text content, and a button is at the bottom.
          </p>
        </div>
        <div class="flex justify-end mt-4">
          <button class="bg-white text-black px-6 py-2 rounded-lg hover:bg-gray-200">
            Visit Site
          </button>
        </div>
      </div>

</div>
  </div>

</div>

Related Examples

Simple count down timer

Author:
Gopi Yadav

2 years ago

15k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.1k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

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

Author:
Ameth Galarcio

1 year ago

1.8k
pages / slides

Author:
MD Fardous Alom

9 months ago

1.2k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

9 months ago

1.2k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

44
App Hero Section With header

Author:
Abdul Baset Bappy

4 months ago

709
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

9 months ago

2.6k
Full Page loading overlay

Author:
Bunny

2 years ago

12.2k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

1 year ago

2.2k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

622

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12