Home
Anonymous
Stylish profile card with a hover effect

Stylish profile card with a hover effect

This tailwind example is contributed by Anonymous, on 07-Sep-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile

Author Anonymous

8.4k

Fork Fullscreen

<div class="max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg hover:shadow-blue-400">
  <div class="relative">
    <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1557862921-37829c790f19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHx1c2VyfGVufDB8MHx8fDE2OTQwOTU5Nzl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Profile Image">
  </div>
  <div class="px-6 py-4">
    <div class="text-xl font-semibold text-gray-800">John Doe</div>
    <p class="text-gray-600">Front-end Developer</p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block px-2 py-1 font-semibold text-teal-900 bg-teal-200 rounded-full">Web</span>
    <span class="inline-block px-2 py-1 font-semibold text-indigo-900 bg-indigo-200 rounded-full">UI/UX</span>
    <span class="inline-block px-2 py-1 font-semibold text-purple-900 bg-purple-200 rounded-full">Design</span>
  </div>
  <div class="px-6 py-4">
    <a href="#" class="text-blue-500 hover:underline">View Profile</a>
  </div>
</div>

Related Examples

User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

2 years ago

61k
User Profile Card
Full-page Profile card

Author:
Prashant

2 years ago

18k
Basic Resume template
simple and clean layout that provides a professional look.

Author:
R.P Ketan

2 years ago

25.7k
User profile card with Cover Image

Author:
Noob

2 years ago

28.5k
About me section with image

Author:
Kofi Osei

2 years ago

23.5k
Modern resume template
modern resume template with data

Author:
Amit Pachange

1 year ago

20.3k
User profile card with social icons
Showcases a user's profile information along with links to their various social media accounts.

Author:
Simon Scheffer

2 years ago

14.5k
Show user details

Author:
Lucas Martinez

2 years ago

24.1k
Avatar
Avatar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.1k
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.

Author:
nejaa badr

7 months ago

1.2k
Ripple Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

2 months ago

672
profile
user profile

Author:
gidy

1 week ago

3

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components