Log Entry Card - Copy this React, Tailwind Component to your project

Create a modern and responsive UI design for displaying log entries in a web application. The design should use a card based layout to present each log's key details, and should include the following components: Title: The action of the log, such as 'Create', 'Update', 'Delete', or 'Login'. This should be displayed as a bold, prominent title at the top of the card. Description: A short description explaining the action that triggered the log. Example: "A new employee was added", "A user updated their profile", or "A product was deleted". Timestamp: The date and time when the log was created or when the action was performed. It should be formatted in a human readable format, such as 'January 18, 2025, 12:30 PM'. The timestamp should be placed near the top of the card, but less prominent than the title. User: The user who performed the action. Example: "admin123", "jane.doe", or "system". This can be displayed below the description or next to the timestamp. Metadata: This section should display additional information about the log entry that can help with understanding the action. Metadata could include: Record ID: Unique identifier for the record that was affected (e.g., "employee123"). Fields/Details: The specific fields or data points that were added, modified, or deleted (e.g., { name: "Juan Pérez", position: "Administrator" }). Action Details: Any specific changes that were made in the system as part of the action, such as updated values (e.g., 'email changed from john@example.com to newjohn@example.com'). Related entities: Any linked entities affected by the action, such as related user, document, or product IDs. Status: If the action was successful or failed, or if there was an error during the action. IP Address: The IP address from which the action was performed (if relevant). Metadata can either be shown directly within the card or placed within a collapsible section to keep the design clean. If it's extensive, it can also be displayed in a table format inside the card. Design Guidelines: The cards should be clean, minimalist, and professional, with clear typography and easy to read fonts. The layout should be responsive, adapting to both desktop and mobile views. Include subtle hover effects on each card to indicate interactivity. Cards should have clear visual separation, with borders, shadows, and padding to make them stand out. The metadata section should be easy to expand/collapse, and should support nested structures (e.g., arrays or objects) where necessary. This layout will allow users to easily read and understand logs and their metadata while maintaining an organized and scalable structure.