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

279

1

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

15.1k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.4k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

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

Author:
Ameth Galarcio

1 year ago

2k
pages / slides

Author:
MD Fardous Alom

11 months ago

1.3k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

11 months ago

1.4k
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

712
hello world
by salvator

Author:
Anonymous

7 months ago

525
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

768
Energy Efficiency Program - Oklahoma
Code for new IT proposal

Author:
Mario Williams

6 months ago

402
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

1 month ago

187
Verify OTP
verification code

Author:
gidy

6 months ago

462

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