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

Tạo ra một nút mở modal hiển thị thông tin chấm công với các chức năng "Sửa" và "Xóa", giao diện cần mượt mà, dễ sử dụng và mang tính chuyên nghiệp. Khi người dùng nhấn vào nút, modal sẽ xuất hiện nhẹ nhàng với hiệu ứng mờ nền và trượt từ dưới lên. Trong modal, các thông tin như ngày(ở đây là dạng input select lịch), giờ chấm công, mã trạng thái, và tên trạng thái sẽ được hiển thị rõ ràng trong các input trường để người dùng dễ dàng sửa đổi. Nút "Sửa" cho phép chỉnh sửa thông tin với các thay đổi dễ dàng, trong khi nút "Xóa" sẽ yêu cầu người dùng xác nhận trước khi xóa, bảo vệ tránh các thao tác không mong muốn. Các nút sẽ có màu sắc nổi bật và hiệu ứng hover mượt mà, tạo cảm giác dễ sử dụng và trực quan. Phong cách thiết kế sẽ nhẹ nhàng, với các trường nhập liệu bo góc, nền sáng và màu sắc hài hòa. Modal sẽ có bóng mờ nhẹ và các nút được căn chỉnh hợp lý, tạo cảm giác chuyên nghiệp. Mọi thao tác trong modal sẽ có chuyển động mượt mà, từ mở modal đến thao tác chỉnh sửa và xóa, nâng cao trải nghiệm người dùng. Khi ở trang thái ko đc edit thì hiển thị cấm khi đưa chuột qua lại các input