Sticky fullpage pages / slides

Sticky full page

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

Author harinandana

Tailwind v3.4 1k 2

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

Gopi Yadav

3 years ago

15.7k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

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

Ameth Galarcio

2 years ago

2.6k
pages / slides

MD Fardous Alom

1 year ago

2.3k
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

2k
3D Count downer

Hasan AlDoy (McDoy)

6 months ago

321
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

4 weeks ago

98
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

4 weeks ago

24
Plant Game
Checking to see if it works

Becky Keyworth

1 year ago

1.1k
Detail Article

Alief Malik

2 months ago

103
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Anum Shahana

2 years ago

2.3k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.