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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information
Author nejaa badr
Related Examples
-
Modern resume templatemodern resume template with data
2 years ago22.5k -
Uses emoji for attention, mentions key features (modern, responsive, accessible)Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.
10 months ago1.1k -
User ProfileUser Profile
1 year ago5.7k -
portfolioComplete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.
8 months ago841 -
products, show, itemsdisplay images, card, products
1 month ago125 -
3 years ago11.6k -
Stacked ProfileStacked profile images
2 years ago7.5k -
8 months ago721 -
Super ProfileThis an if look like profile
9 months ago697 -
9 months ago1.3k -
YouTube Community Post UI MockupA static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.
10 months ago970 -
1 year ago4.1k
Explore components by Tags
Didn't find component you were looking for?
Search from 3000+ components
