Card Layout - Copy this React, Tailwind Component to your project

Objective: Create a responsive UI card layout with high level visual appeal and smooth animations. Layout Specifications: Desktop View: Display three cards per row. The cards should be evenly spaced with consistent margins and padding. Mobile View: Display one card per row for a more user friendly layout on smaller screens. Card Design: Card Content: Message: Display the main content or message. Send At: Show a timestamp indicating when the message was sent. Delete Button: Provide a button to delete the card. The button should be styled for prominence and usability. Card Styling: Use modern card design principles with rounded corners, shadow effects, and clean lines. Include smooth transitions and animations for hover and click effects. Incorporate a subtle background color or gradient for visual depth. Ensure the text is legible with appropriate font sizes and weights. Add visual feedback for interactions (e.g., button hover effects, card hover effects). Animations and Transitions: Card Hover Effect: Implement a hover effect that slightly elevates the card and applies a shadow for a 3D effect. Button Transitions: Add smooth transitions for the "Delete" button, such as color change on hover and a subtle scale effect. Loading State: If applicable, include a loading spinner or skeleton screen to indicate that data is being fetched. Responsive Design: Ensure that the card layout adapts gracefully to various screen sizes. On larger screens (e.g., tablets and desktops), show three cards in a row. On smaller screens (e.g., mobile devices), switch to one card per row to ensure readability and ease of use. Additional Enhancements: Accessibility: Ensure that all interactive elements are accessible and keyboard navigable. Visual Consistency: Maintain a consistent color scheme and design language throughout the UI. Performance: Optimize card rendering to ensure smooth performance even with many cards.