JZ
Juan Zamora

Course Management - Copy this React, Tailwind Component to your project

Description:-Design-a-modern-and-clean-user-interface-for-a-course-management-application.-The-layout-includes:-Sidebar-(Dark-Theme):-Positioned-on-the-left-side-with-a-dark-background.-Contains-an-avatar-at-the-top-with-the-user's-name-and-email-displayed-below.-Navigation-options:-"Courses,"-"Lists,"-"Certificates,"-"Reports,"-"Personal,"-"Settings,"-and-"Logout."-Main-Content-Area:-Header-Section:-Title:-"Courses."-Search-bar-in-the-center-with-a-magnifying-glass-icon.-Filter-button-next-to-the-search-bar.-Two-prominent-buttons:-Blue-button-labeled-"Search."-Green-button-labeled-"Add."-Course-Categories:-Organized-into-collapsible-sections:-Category-1:-"Administrative-Courses"-with-a-pink-header.-Category-2:-"System-Courses"-with-a-blue-header.-Each-category-contains-rectangular-course-cards-with:-A-light-gray-book-icon-as-a-placeholder.-Course-title-(e.g.,-"Project-Management,"-"Advanced-Databases").-A-three-dot-menu-for-additional-options.-Design-Elements:-Colors:-Sidebar:-Dark-gray/black.-Background:-White.-Headers:-Soft-pastel-colors-(pink-for-"Administrative"-and-blue-for-"System"-courses).-Buttons:-Blue-for-the-"Search"-action.-Green-for-the-"Add"-action.-Course-cards:-Light-gray-with-darker-gray-icons-and-black-text.-Clean-typography-for-all-text-and-labels.-Subtle-shadow-effects-for-the-course-cards-to-create-a-modern-3D-look.-Output-Style:-Minimalistic,-modern-UI-design-with-clear-focus-on-usability-and-accessibility.

Prompt
Component Preview

About

CourseManagement - A sleek UI with a dark sidebar, search bar, collapsible categories, and modern course cards. Built with React and Tai. Access free code!

Share

Last updated 1 month ago