JR
Javier Rico

Student Dashboard - Copy this React, Tailwind Component to your project

Design a high quality, user friendly UI component for a student dashboard that displays a list of available exams for practice. The component should: Exam List Presentation: Clearly display each exam’s title and description. For completed exams, show the student’s score prominently. Use visual indicators (e.g., icons, badges, or color coding) to differentiate between Not Started and Completed exams. Exam Rules Header: Include a header section that explains the rules for all exams (e.g., "30 minutes to answer 30 questions," "Maximum of 2 failed questions to pass"). Ensure the rules are concise, easy to read, and visually distinct (e.g., use a bordered box, subtle background color, or typography hierarchy). Interaction and Usability: Allow students to click on an exam to start or review it. Provide a clear call to action (e.g., "Start Exam" or "Review Results") for each exam. Ensure the component is responsive and works seamlessly on both desktop and mobile devices. Visual Design: Use a modern, clean, and professional design aesthetic. Incorporate a consistent color scheme and typography that aligns with the overall branding of the platform. Prioritize readability and accessibility (e.g., sufficient contrast, legible fonts). Additional Features (Optional): Include a search or filter option to help students find specific exams. Add a progress tracker to show overall completion of all available exams. The goal is to create an intuitive, visually appealing, and functional component that enhances the student’s experience and encourages engagement with the practice exams.

Prompt
Component Preview

About

StudentDashboard - Display exams with titles, scores, and rules. Click to start or review. Responsive design, search option, built with. Get free template!

Share

Last updated 1 month ago