User Profile Card
This User Profile Card includes:
1. Responsive design using Tailwind CSS classes
2. Indigo-800 and Blue-900 color scheme
3. Dark mode support with appropriate color adjustments
4. Profile picture with hover effect
5. User name, job title, and a brief description
6. Social media icons with hover effects
7. Skill tags with hover animations
8. Connect button with hover effect
9. Subtle animations and transitions for better user experience
10. Automatic dark mode detection based on system preferences
Key features:
- The background uses a gradient from Indigo-800 to Blue-900
- The card has a white background in light mode and dark gray in dark mode
- Text colors are adjusted for readability in both light and dark modes
- The profile picture has a border that changes color in dark mode
- Social media icons and skill tags have hover effects
- The Connect button uses Indigo-800 with a Blue-900 hover state
- The entire card has a shadow effect that changes on hover
- Dark mode is automatically applied based on system preferences
This design provides a clean, professional look for a user profile card while incorporating the requested color scheme and maintaining good usability across different devices and color modes.
This tailwind example is contributed by nejaa badr, on 31-Oct-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information
Related Examples
-
-
-
1.5k -
13.4k -
-
Modern CV Template - Stylish HTML and Tailwind CSS Design for ProfessionalsDownload this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.
3.7k -
User profile card with social iconsShowcases a user's profile information along with links to their various social media accounts.
15.7k -
Engineering Project DashboardTrack engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.
540 -
-
Updated customer details pageCustomer details page
4.3k -
Acode MasterAcode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.
-
User ProfileUser Profile
9.4k
Browse by topic
Explore components by Tags
Jump straight to the UI pattern you need.
Can't find it?
Didn't find the component you were looking for?
Search across 3,000+ community-built components and grab the code in seconds.