A
Anonymous

Grade Tracker - Copy this React, Tailwind Component to your project

<div className="min h screen bg gray 100 flex flex col justify between p 4 sm:p 8"> <form onSubmit={handleSubmit} className="flex flex col flex grow"> <div className="flex flex col flex grow"> <Tabs defaultValue={`${semesters[0]} Semester`} className="w full bg white shadow md rounded lg" value={`${activeSemester} Semester`} onValueChange={(value) => { const semester = parseInt(value.split(" ")[0], 10); setActiveSemester(semester); }}> <TabsList className="flex justify between overflow x auto py 2"> {semesters.map((semester) => ( <TabsTrigger key={semester} value={`${semester} Semester`} className={`px 4 py 2 w full sm:w auto text center text sm sm:text base font medium transition all duration 300 hover:bg blue 100 hover:text blue 600 ${ activeSemester === semester ? "bg blue 600 text white" : "bg gray 200 text gray 800" }`}> {semester} Semester </TabsTrigger> ))} </TabsList> {semesters.map((semester) => ( <TabsContent key={semester} value={`${semester} Semester`}> <SelectForm semester={semester} courses={ allCourses[semester] || { labCourses: [], theoryCourses: [], } } selectedCourses={allSelectedCourses[semester]} onCourseChange={handleCourseChange} /> </TabsContent> ))} </Tabs> </div> {/* Sticky navigation bar at the bottom */} <div className="fixed bottom 0 left 0 w full bg white p 4 border t border gray 300 flex justify between"> {activeSemester !== semesters[0] && ( <button type="button" className="w 1/2 sm:w auto px 4 py 2 bg gray 500 text white rounded md hover:bg gray 700" onClick={goToPreviousSemester}> Previous </button> )} {activeSemester !== semesters[semesters.length 1] ? ( <button type="button" className="w 1/2 sm:w auto px 4 py 2 bg blue 500 text white rounded md hover:bg blue 700 ml auto" onClick={goToNextSemester}> Next </button> ) : ( <button type="submit" className="w 1/2 sm:w auto px 4 py 2 bg green 500 text white rounded md hover:bg green 700 ml auto"> Submit </button> )} </div> </form> </div>make this mobile responsive and make the ui clean and fun

Prompt
Component Preview

About

GradeTracker - A user-friendly tool for tracking courses by semester. Built with React and Tailwind, featuring tabs, forms, and mobile. View and copy code!

Share

Last updated 1 month ago