Mood Based U I - Copy this React, Tailwind Component to your project

Happy-Mood-(Motivated,-Joyful):-Colors:-Bright,-warm-hues-(yellow,-orange,-light-green).-Font-Style:-Playful,-round-fonts.-Buttons:-Dynamic-buttons-with-micro-interactions-(e.g.,-slight-bounce-effect).-Animations:-Small-confetti-effects,-cheerful-icons,-subtle-motion-effects-when-the-user-completes-tasks.-AI-Tone:-Uplifting,-energetic,-and-positive.-Example:-“Great-job!-You're-on-fire-today,-keep-it-up!”-Calm/Neutral-Mood-(Content,-Relaxed):-Colors:-Soft-blues,-greens,-muted-purples.-Font-Style:-Simple-sans-serif,-clear-and-legible.-Buttons:-Minimalist-buttons,-subtle-transitions-(e.g.,-slight-fading).-Animations:-Smooth-transitions-and-no-jarring-movements.-AI-Tone:-Gentle,-empathetic,-and-supportive.-Example:-“Take-your-time.-Everything-is-okay.”-Anxious/Frustrated-Mood-(Stressed,-Angry,-Overwhelmed):-Colors:-Dark-reds,-deep-blues,-dark-purples,-or-neutral-tones-(gray).-Font-Style:-Clean,-sans-serif-with-bolder-or-thicker-weights-to-highlight-important-information.-Buttons:-Large,-simple-buttons-that-allow-for-easy-interaction.-Animations:-Minimal-animations—anything-too-fast-or-abrupt-might-increase-frustration.-Use-calming,-slow-animations-for-interactions.-AI-Tone:-Calming,-reassuring,-and-focused-on-grounding-the-user.-Example:-“Let's-take-a-few-deep-breaths-together.-You’re-doing-great.”-Sad-Mood-(Depressed,-Lonely):-Colors:-Soft-pastels-or-muted-tones-like-light-blue,-gray,-or-lavender.-Font-Style:-Soft,-rounded-fonts.-Buttons:-Large-buttons-with-text-centered.-Soft-gradients-for-buttons-to-create-a-sense-of-security.-Animations:-Slow,-subtle-animations-like-gradual-fades-in-and-out.