18 days ago

Create a production-grade, premium expense-sharing dashboard for SplitBills (Splitwise clone) using Tailwind CSS 3.4+ and Flowbite components: - Full responsive layout with mobile-first approach - Sticky top navbar with gradient background (#667eea → #764ba2), logo on left, user avatar dropdown with name + logout + profile link, notification bell with red badge, dark mode toggle - Hero section: "Welcome back, [User Name]!" with large typography and subtle confetti animation on load - Three stat cards in a responsive grid (desktop 3-col, tablet 2-col, mobile 1-col): 1. Total Balance → large bold amount with green/red conditional color + trend arrow 2. You Owe → red card with negative amount 3. You are Owed → green card with positive amount Each card with subtle hover lift (scale-105 + shadow-2xl), glassmorphism effect, and micro-interactions - Recent activity feed with avatar + name + "paid ₹xxx for Dinner" + timestamp + comment icon - Floating "+ Add Expense" FAB (bottom-right, purple-pink gradient, pulse animation) - "Settle Up" CTA button with UPI icon and shimmer effect - Sidebar on large screens (hidden on mobile, toggleable) with Groups, Friends, Activity, Settings - Dark mode fully supported with proper contrast ratios (WCAG AA compliant) - All components using Flowbite (cards, dropdowns, modals, tooltips, avatars) - Smooth page transitions and skeleton loaders - Accessible: proper ARIA labels, focus states, keyboard navigation - Include Chart.js placeholder for future pie chart (You owe / You are owed breakdown) Style: Modern, minimal, premium gradient accents, rounded-xl corners, generous whitespace, micro-animations, mobile hamburger menu with slide-in effect.

Fork

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates