A
Anonymous

Student Attendance Modal - Copy this React, Tailwind Component to your project

Design a modern, user friendly modal to display student attendance log details: Name: Michael Martinez Avatar Gender: Male Student ID: 31908265 Class: Two Check In Time: Show time if available, otherwise "Not Available" Record Date: Readable date format Attendance Status: Absent/Present (highlight with color) User Serial Number: 1 Institute ID Created At and Updated At: Formatted dates Design guidelines: Organized layout with sections for personal info, attendance, and timestamps. Highlight status with color (e.g., red for absent). Responsive design, suitable for desktop and mobile. Accessible "Close" and "Edit" buttons. Use icons for quick scanning (e.g., status, gender). Bonus: Light/dark mode, tooltips for additional context. Audience: School administrators and teachers.

Prompt
Component Preview

About

StudentAttendanceModal - A modern modal displaying student details like name, ID, attendance status, and timestamps. Built with React. Get instant access!

Share

Last updated 1 month ago