Ecommerce Order System - Copy this React, Tailwind Component to your project

Create a modern e-commerce ordering system using neomorphic design principles, incorporating the following specifications: Product Display: - Design floating product cards with subtle shadows (2-4px blur, 20% opacity) - Implement a soft, raised effect using light source from top-left (45 degrees) - Add hover state with smooth elevation increase (1px rise, 0.2s transition) Interactive Elements: - Create quantity adjusters with: * Circular +/- buttons with 1px inset on press * Smooth depression animation (0.15s duration) * Haptic feedback effect for mobile users Order Status Visualization: - Design a horizontal progress tracker with: * 3D elevated segments (2px rise) * Active state highlighting with shadow depth * Animated transitions between stages * Clear visual hierarchy for completed/current/upcoming steps Action Buttons: - Implement a reorder button featuring: * Circular ripple animation from point of click * 0.3s animation duration * Subtle gradient overlay * Clear hover and active states Shopping Cart: - Design a right-side slide-in panel with: * Smooth entrance animation (0.4s ease-out) * Soft shadow depth for separation * Backdrop blur effect * Elegant exit transition Micro-interactions: - Add loading states for all interactive elements: * Subtle pulse animation for buttons (0.8s) * Skeleton loading for product cards * Progress spinners for order processing * Success/error state transitions Ensure all elements maintain consistent depth and lighting across different states and interactions.