Stacking Cards

Basic stackable cards using Tailwind CSS.

Built with Tailwind CSS.

Demo

Code

tsx
import React from 'react';

const COLORS = [
  'bg-slate-700',
  'bg-slate-500',
  'bg-slate-700',
  'bg-slate-500',
  'bg-slate-700',
  'bg-slate-500'
];

export function StackingCards() {
  return (
    <div className="h-[500px] overflow-hidden">
      <div className="h-full overflow-auto scroll-smooth">
        {COLORS.map((color, index) => {
          return (
            <div
              key={index}
              className={`${color} sticky left-0 rounded-2xl`}
              style={{
                top: `${index * 15}px`,
                height: `calc(100% - ${index * 5}px)`
              }}
            ></div>
          );
        })}
      </div>
    </div>
  );
}