BC
Brian Christensen

Wellness Trend Card - Copy this React, Tailwind Component to your project

amazing! what about this one? Nutritional Health Overview Card KPIs Displayed: Daily Vitamin and Mineral Intake: Shows percentage of daily nutrient goals met, with icons for each key vitamin/mineral. Portion Control Check: Displays the percentage of meals meeting portion recommendations. Calorie Balance: Shows calories consumed versus calories burned. Animation & Interactivity: Icons Animate in Sequence: Icons for vitamins and minerals appear sequentially as users log meals or supplements. Interactive Portion Control Visual: Users can click to see a visual guide (e.g., hand measurements) for portion control. Calorie Balance Animation: Calorie intake and burn numbers “count up” to show the balance throughout the day, reinforcing calorie awareness.

Prompt
Component Preview

About

WellnessTrendCard - Track your weekly wellness with mood scores, caloric burn, and nutrient intake. Built with React and Tailwind. Get code instantly!

Share

Last updated 1 month ago