A
Anonymous

User Activity Display - Copy this React, Tailwind Component to your project

Create a user activity display component for a chat application that shows when a user switches to a specific link. The design should include: User Avatar: A circular avatar image representing the user on the left side. User Name: Display the user’s name in bold text next to the avatar. Activity Text: A short sentence indicating the action, such as "switched to". Link: A clickable link that directs to the specific URL the user switched to. The link text should be styled to appear underlined and in a distinct color (e.g., blue). Styling: The entire activity should be enclosed in a visually appealing card layout with the following features: Rounded corners and a subtle box shadow for depth. Use a clean, modern font and appropriate font sizes (e.g., 14px for the user name and activity text). Space elements evenly to ensure readability and an organized appearance. Ensure that the overall design is responsive and adjusts well to mobile screens.

Prompt
Component Preview

About

UserActivityDisplay - Show user actions in a chat app with avatar, name, activity text, and clickable link. Built with React and Tailw. Download instantly!

Share

Last updated 1 month ago