View Detail Button - Copy this React, Tailwind Component to your project

Thiết kế một nút icon "Xem Chi Tiết" để mở modal hiển thị thông tin từ API. Modal phải có bố cục rõ ràng, dễ đọc và hiệu ứng chuyển động mượt mà, đồng thời thiết kế hiện đại, chuyên nghiệp. Nút Icon "Xem Chi Tiết" Thiết kế: Icon hình con mắt đại diện cho "Xem Chi Tiết" (EyeOutlined từ Ant Design hoặc biểu tượng tương tự). Đơn giản nhưng nổi bật, sử dụng tooltip khi người dùng di chuột qua với nội dung "Xem Chi Tiết". Thêm hiệu ứng chuyển động nhẹ khi hover, ví dụ như đổi màu từ xám sang xanh lam hoặc phóng to nhẹ. Có kích thước vừa phải, dễ nhìn, và được căn chỉnh đồng đều với các thành phần khác trong giao diện. Modal Hiển Thị Thông Tin Tiêu đề: Hiển thị "Thông Tin Chi Tiết" một cách nổi bật với kiểu chữ lớn và màu sắc thu hút (ví dụ: xanh lam đậm). Nội dung: Dữ liệu từ API được trình bày trong bảng hoặc danh sách, chia thành các cột/từng mục để dễ đọc: ID: Mã định danh. Ngày Chấm Công: Hiển thị ngày tháng rõ ràng, được định dạng lại (dd/MM/yyyy). Thời Gian: Hiển thị thời gian cụ thể (hh:mm:ss). Trạng Thái: Ví dụ: "Vào" hoặc "Ra". Sử dụng font chữ hiện đại và khoảng cách hợp lý giữa các dòng để tránh cảm giác chật chội. Hiệu ứng: Modal mở/đóng với hiệu ứng fade in/fade out mượt mà. Thiết kế: Kết hợp màu sắc nhã nhặn để tạo cảm giác chuyên nghiệp và dễ chịu cho mắt người dùng.