Dashboard - Copy this React, Tailwind Component to your project

Computer-Engineering-User-Dashboard-Design-Prompt:-General-Layout:-Two-Column-Structure:-A-left-sidebar-for-navigation-and-a-main-content-area-on-the-right-to-display-details-related-to-each-section.-Department-Branding:-Use-a-professional-color-palette-with-Computer-Engineering-accents-(e.g.,-blues,-greys,-and-a-touch-of-orange-or-green-for-emphasis)-to-keep-the-look-relevant-to-tech-and-engineering.-Icons-and-Graphics:-Use-relevant-icons-(e.g.,-profile-icon-for-Profile,-trophy-for-Leaderboard,-newspaper-for-News)-and-subtle,-modern-graphics-related-to-computer-engineering-to-give-it-an-industry-specific-feel.-1.-Left-Sidebar-Navigation:-Position:-Left-side-of-the-screen,-occupying-about-20%-of-the-width.-Content:-Department-Logo:-Display-the-Computer-Engineering-Department-logo-at-the-top,-aligned-with-department-branding.-Menu-Links:-Include-links-to-“Profile,”-“Exams,”-“Leaderboard,”-and-“News,”-each-with-a-relevant-icon.-Highlight-Active-Link:-Use-a-subtle-color-background-or-underline-to-highlight-the-currently-selected-section.-Styling:-Background-Color:-Light-grey-or-muted-blue.-Link-Color:-Use-a-dark-font-color-with-a-highlight-effect-on-hover.-Icons:-Display-icons-next-to-each-link,-in-a-size-proportional-to-the-text.-2.-Main-Content-Area:-Position:-Right-side-of-the-screen,-occupying-about-80%-of-the-width.-Background:-White-or-light-colored-background-with-light-shadows-for-individual-sections.-Section-Details:-A.-Profile-Layout:-Centered-card-or-container-displaying-profile-details.-Content:-Profile-Picture:-Circular-image-placeholder-for-the-user’s-profile-photo.-Information-Fields:-Show-name,-student-ID,-major-(Computer-Engineering),-email,-and-year-of-study.-Edit-Button:-A-small-button-for-editing-profile-details,-placed-at-the-top-right-of-the-profile-card.-Styling:-Use-subtle-lines-or-separators-between-fields,-and-a-prominent-Edit-button-for-easy-accessibility.-B.-Exams-Layout:-Grid-or-list-layout-for-upcoming-and-past-exams.-Content:-Upcoming-Exams:-Display-subject-name,-exam-date,-and-time,-with-a-countdown-timer-for-each.-Completed-Exams:-Show-past-exams-with-scores-or-grades,-and-a-“View-Details”-button-for-each.-Styling:-Use-color-coded-tags-(e.g.,-blue-for-upcoming,-green-for-completed).-Light-borders-around-each-exam-item,-with-hover-effects-for-interactivity.-Countdown-timers-in-a-different-color-to-make-them-visually-distinct.-C.-Leaderboard-Layout:-Table-or-card-layout-showing-top-students-based-on-exam-scores.-Content:-Top-Performers:-Display-top-students-with-ranks,-profile-pictures,-names,-and-points.-User-Rank-Highlight:-Highlight-the-current-user’s-rank-in-a-different-color-or-bold-text-for-easy-reference.-Styling:-Table-Columns:-Rank,-Student-Name,-Points.-Special-Highlight:-Add-an-accent-color-for-the-top-3-ranks-or-a-medal-icon-next-to-their-names.-Use-a-slight-background-color-difference-for-odd/even-rows-for-readability.-D.-News-Layout:-List-or-card-layout-for-Computer-Engineering-Department-news-and-announcements.-Content:-News-Title:-Brief,-descriptive-title.-Date:-Small-date-label-next-to-each-title.-Description:-Short-summary-of-the-news-item,-with-a-“Read-More”-link.-Styling:-News-Card-Background:-Use-a-subtle-background-for-each-news-card.-Hover-Effects:-Slight-shadow-or-lift-effect-on-hover.-Icons:-Small-newspaper-or-announcement-icon-next-to-each-title-for-visual-clarity.-Visual-and-Interactive-Styling:-Typography:-Clean,-sans-serif-font-for-headings-and-details,-with-a-slightly-larger-font-for-headings.-Color-Scheme:-Light-and-professional-colors,-with-accent-colors-for-interactive-elements-like-buttons,-countdowns,-or-highlights.-Spacing-and-Padding:-Ensure-comfortable-padding-between-sections-and-around-text-elements-for-readability.-Hover-Effects:-Apply-subtle-hover-effects-to-clickable-items-(e.g.,-links,-buttons,-rows-in-the-leaderboard)-to-enhance-interactivity.-Responsive-Design:-Mobile-View:-Collapse-sidebar-into-a-hamburger-menu,-and-stack-sections-vertically.-Tablet/Desktop-View:-Maintain-the-two-column-structure-with-responsive-spacing.