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 CSS v3. It is responsive. similar terms for this example are Author box, User information
Author nejaa badr
Related Examples
-
User profile card with social iconsShowcases a user's profile information along with links to their various social media accounts.
1 year ago13.5k -
Update ProfileUpdate profile page with basic informations
1 month ago462 -
1 year ago11.4k -
My Personal Landing pageThis HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.
9 months ago3.6k -
Flex ProfileTailwind Flex User Profile
9 months ago3.1k -
1 week ago47 -
Card profileprofile card
10 months ago1.8k -
Author cardAuthor card for giving credit to the author of the Blog/Article. It has social media icons and user image
1 year ago6.8k -
Portfolio Hero Section 2visually stunning and captivating hero section component for your portfolio website.
6 months ago2.2k -
1 month ago794 -
beautifull portfolio pageI create a portfolio page
5 months ago900 -
User Profile CardFull-page Profile card
2 years ago15.7k
Explore components by Tags
Didn't find component you were looking for?
Search from 1800+ components
