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 v3.4. It is responsive. similar terms for this example are Author box, User information
Related Examples
-
Responsive portfolio with dark moderesponsive and support dark mode .portfolio website
4.6k -
Responsive Hero Section with Typewriter EffectA modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.
-
The Future of Web Developmentlove my product
-
-
cardTarjeta descriptiva
-
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.
-
Cardsthe best tailwind cards with responsive
1.5k -
Tailwind Card ComponentsA collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.
1.4k -
portfolioThis portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, 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) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - 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 This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.
3.6k -
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.
-
profile pageprofile page
2.7k -
Jobs recommended for youThis HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).
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.