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
-
Stacked ProfileStacked profile images
1 year ago6.2k -
Modern Responsive Footer with Tailwind CSSThis sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.
3 weeks ago291 -
Profile CardUser Profile Card with Name and Location
5 months ago974 -
Responsive Portfolio Webpage with Tailwind CSSThis is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.
1 month ago556 -
User profile card with social iconsShowcases a user's profile information along with links to their various social media accounts.
2 years ago14k -
Personal cardA card to show minimal info for staff member
2 months ago200 -
User Profile Sidebar MenuA clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.
1 week ago64 -
Profit CardProfit card with deatils
3 months ago713 -
Profile CardResponsive modern profile card
1 week ago100 -
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.
6 months ago1.6k -
Profile cardProfile card with social icons
2 years ago12k -
Card profileprofile card
1 year ago2.1k
Explore components by Tags
Didn't find component you were looking for?
Search from 2100+ components
