Back to prompts
Create a stunning animated pricing table component. Design Requirements: - Three-tier layout (Basic, Pro, Enterprise) - Monthly/Annual toggle with savings badge - Feature comparison with checkmarks - Highlighted "Popular" tier with border glow - Responsive: stacks on mobile Animations: - Price counter animation when toggling billing period - Cards slide up on mount with stagger - Hover: subtle lift with shadow increase - Feature checkmarks animate in sequence - Toggle switch with smooth spring animation Interactive Elements: - Billing period toggle (animated) - CTA buttons with loading states - Expandable feature lists - Tooltip explanations for features Code Structure: - Fully typed TypeScript component - Configurable via props (tiers data, currency, etc.) - CSS-in-JS or Tailwind styling - Framer Motion for animations - Accessible (keyboard navigation, screen reader labels)
Related Prompts
View allDrag & Drop File Upload
Build a polished drag-and-drop file upload component. Features: - Drag and drop zone with visual fe...
File UploadDrag Drop
Command Palette (CMD+K)
Create a Spotlight/Linear-style command palette. Functionality: - Global keyboard shortcut (CMD/CTR...
Command PaletteSearch
Toast Notification System
Build a complete toast notification system. Toast Types: - Success (green checkmark) - Error (red X...
ToastNotifications
Glassmorphic Login Page
Create a stunning glassmorphic login experience. Visual Design: - Gradient mesh animated background...
GlassmorphismLogin