Profile Card

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<div class="group relative bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
  <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
    <button class="p-2 rounded-full hover:bg-gray-100 text-gray-400 hover:text-gray-600">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
      </svg>
    </button>
  </div>
  
  <div class="flex flex-col items-center text-center">
    <div class="relative mb-4">
      <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=128&h=128&fit=crop&crop=faces" alt="Marcus Chen" class="w-24 h-24 rounded-full object-cover ring-4 ring-blue-50">
      <span class="absolute bottom-1 right-1 w-5 h-5 bg-green-500 border-2 border-white rounded-full"></span>
    </div>
    
    <h3 class="text-lg font-semibold text-gray-900">Marcus Chen</h3>
    <p class="text-sm text-blue-600 font-medium mb-1">Senior Product Designer</p>
    <p class="text-sm text-gray-500 mb-4">San Francisco, CA</p>
    
    <div class="flex gap-2 mb-5">
      <span class="px-3 py-1 text-xs font-medium bg-blue-50 text-blue-600 rounded-full">UI/UX</span>
      <span class="px-3 py-1 text-xs font-medium bg-purple-50 text-purple-600 rounded-full">Figma</span>
      <span class="px-3 py-1 text-xs font-medium bg-amber-50 text-amber-600 rounded-full">Design Systems</span>
    </div>
    
    <div class="flex items-center gap-6 w-full pt-4 border-t border-gray-100">
      <div class="flex-1 text-center">
        <p class="text-xl font-bold text-gray-900">248</p>
        <p class="text-xs text-gray-500">Projects</p>
      </div>
      <div class="flex-1 text-center border-x border-gray-100">
        <p class="text-xl font-bold text-gray-900">12.4k</p>
        <p class="text-xs text-gray-500">Followers</p>
      </div>
      <div class="flex-1 text-center">
        <p class="text-xl font-bold text-gray-900">89</p>
        <p class="text-xs text-gray-500">Reviews</p>
      </div>
    </div>
    
    <div class="flex gap-3 w-full mt-5">
      <button class="flex-1 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
        Connect
      </button>
      <button class="px-4 py-2.5 border border-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">
        Message
      </button>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Profile Card

User profile card with avatar, name, and meta.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Avatar + name
- Bio / meta
- Optional actions

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/profile-card
```

Copy from `code.html`.

## Customization

- Avatar size, typography, action styles

## Accessibility

- Meaningful avatar alternatives when relevant

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`