profile page
This profile page design includes:
1. Responsive layout using Flexbox
2. Indigo-800 and Blue-900 color scheme
3. Dark mode support
4. Profile picture with hover effect
5. About Me section
6. Skills section with interactive tags
7. Contact information with icons
8. Edit Profile button
9. Subtle animations and transitions
10. Accessibility considerations (proper heading structure, color contrast)
Key features:
- The background uses a gradient from Indigo-800 to Blue-900
- The profile 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 color that changes in dark mode
- Skill tags have a hover effect that changes their color
- Icons in the contact section use the theme colors
- The Edit Profile button uses Indigo-800 with a Blue-900 hover state
- Dark mode is automatically applied based on system preferences
- The entire card fades in on load for a smooth entrance
- The profile picture has a subtle scale effect on hover
This design provides a clean, professional look 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. It supports dark mode. similar terms for this example are Author box, User information
Related Examples
-
Experience CardExperience card section you can use for portfolio or other profiles.
4.4k -
-
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.
2.7k -
-
ApexCodeStudios.com Celestara Profile OdysseyGet Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. Beautiful dual-style profile cards with cover images, stylish avatars, stats sections, social links, and follow buttons.
-
-
High-Performance Hotel Operations & AI Agent Testing DashboardA sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.
1.1k -
User ProfileUser Profile
6.4k -
-
AvatarAvatar
5.2k -
canvas fully coverscanvas fully covers
5.2k -
cardbest responsive tailwind card
1.8k
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.