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
-
Animated Profile CardAnimated profile card with profile completion circle
3 months ago545 -
2 weeks ago278 -
Servicesexplore our awesome Services
10 months ago1.9k -
2 months ago550 -
Author cardAuthor card for giving credit to the author of the Blog/Article. It has social media icons and user image
1 year ago7.1k -
PortfolioThis responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the
5 months ago2k -
Personal cardA card to show minimal info for staff member
3 months ago317 -
6 months ago1.3k -
2 years ago10.8k -
Portfolio Hero Section 2visually stunning and captivating hero section component for your portfolio website.
10 months ago3.9k -
1 year ago7.1k -
AvatarAvatar
1 year ago4k
Explore components by Tags
Didn't find component you were looking for?
Search from 2100+ components
