Stat Card - Copy this React, Tailwind Component to your project
Create a responsive medical dashboard stats grid with the following detailed specifications: Design System Requirements: - Grid Layout: * 2x2 responsive grid using CSS Grid or Flexbox * Minimum card size: 280px × 180px * Auto-adjust cards to viewport width * Consistent 20px gap between all cards * Container max-width: 1200px, centered * Responsive breakpoints at 768px and 1024px Visual Styling: - Base Theme: * Background: #f1f5f9 * Card gradient: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%) * Text colors: Primary #1e293b, Secondary #64748b * Border radius: 16px - Neomorphic Effects: * Primary elevation: 8px 8px 16px rgba(26, 26, 26, 0.25) * Secondary highlight: -8px -8px 16px rgba(255, 255, 255, 0.3) * Active state shadow: inset 4px 4px 8px rgba(26, 26, 26, 0.25) Card Components (implement all): 1. Appointments Card: * Icon: calendar-plus * Display: Next appointment date/time * Counter: Total upcoming 2. Test Results Card: * Icon: clipboard-pulse * Display: Latest test date * Status indicators: New/Pending/Complete 3. Medication Schedule Card: * Icon: pills * Display: Next dose timing * Counter: Remaining today 4. Billing Card: * Icon: receipt * Display: Payment due date * Amount: Outstanding balance Interactive Behaviors: - Hover State: * Transform: translateY(-4px) scale(1.02) * Transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) * Shadow intensity: increase by 15% - Active State: * Transform: translateY(2px) * Apply inset shadow * Reverse background gradient - Loading States: * Implement skeleton loading * Add shimmer effect (gradient animation) * 400ms transition duration Accessibility Requirements: - Semantic HTML structure - ARIA roles and labels: * role="region" for card sections * aria-label for interactive elements * aria-live for dynamic content - Keyboard navigation support - Focus indicators: 2px solid #3b82f6 - Color contrast ratio: minimum 4.5:1 - Support for screen readers Performance Optimization: - Use CSS containment - Implement will-change for animations - Debounce hover effects - Optimize paint operations Browser Support: - Modern browsers (last 2 versions) - Fallbacks for older browsers - Progressive enhancement approach
