Expandable Team Card

Interactive profile card that expands to reveal additional content

cards

Installation

npm install lucide-react
npm install tailwindcss@latest
# or
yarn add tailwindcss@latest

Tailwind Setup

// Add to your CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;

Add to globals.css

/* Optional theme variables (only if not already defined) */
:root {
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --muted-foreground: 215.4 16.3% 46.9%;
}

.dark {
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --muted-foreground: 215 20.2% 65.1%;
}

/* Expand animation */
.expand-wrapper {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.7s cubic-bezier(.25,.1,.25,1), margin-top 0.4s;
}

.expand-wrapper.open {
  max-height: 220px;
  margin-top: 10px;
}