MF
Media Facile

Academic Performance Dashboard - Copy this Html, Tailwind Component to your project

"Create a modern and visually appealing web interface to display academic performance data. The design should have a clean, flat, and minimalist style with smooth gradients and contemporary typography. Ensure the following elements are included: Total Average Display: Use a prominent circular progress bar or donut chart with sleek animations to show the 'Total Average Score' (e.g., 6.51). The score should be center aligned within the circular chart. Individual Subject Scores: Display subject names (e.g., Educazione Civica, Informatica, Lingua e Letteratura Italiana) with their respective scores. For each score, use color coding: green for positive scores, red for lower scores. Represent the scores visually with progress rings or horizontal bars, incorporating subtle animations when loading. Navigation for Periods: Include a tabbed navigation to switch between '1° Periodo' and '2° Periodo' (first and second periods). The active tab should be clearly highlighted with a modern gradient or shadow effect. Modern Aesthetics: Use soft shadows, rounded corners, and a dark background for better contrast. Include responsive design elements to ensure compatibility with mobile devices, tablets, and desktops. Overall, the UI should prioritize clarity and usability with a visually attractive modern style."

Prompt
Component Preview

About

Academic Performance Dashboard - Display total averages and subject scores with progress bars, tab navigation, and a modern design buil. Copy template now!

Share

Last updated 1 month ago