Job Listing 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

<div class="group bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg hover:border-blue-100 transition-all p-5">
  <div class="flex items-start gap-4">
    <div class="w-14 h-14 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl flex items-center justify-center shrink-0">
      <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=64&h=64&fit=crop" alt="Company" class="w-8 h-8 rounded-lg object-cover">
    </div>
    
    <div class="flex-1 min-w-0">
      <div class="flex items-start justify-between gap-2">
        <div>
          <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Senior Frontend Engineer</h3>
          <p class="text-sm text-gray-500">Stripe Technologies</p>
        </div>
        <button class="p-2 hover:bg-gray-100 rounded-full text-gray-400 hover:text-red-500 transition-colors shrink-0">
          <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
          </svg>
        </button>
      </div>
      
      <div class="flex flex-wrap items-center gap-2 mt-3 text-xs text-gray-500">
        <span class="px-2.5 py-1 bg-gray-100 rounded-full flex items-center gap-1">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
          </svg>
          San Francisco
        </span>
        <span class="px-2.5 py-1 bg-gray-100 rounded-full">$180k - $240k</span>
        <span class="px-2.5 py-1 bg-green-100 text-green-700 rounded-full">Full-time</span>
        <span class="px-2.5 py-1 bg-purple-100 text-purple-700 rounded-full">Remote</span>
      </div>
      
      <p class="text-sm text-gray-600 mt-3 line-clamp-2">We're looking for a Senior Frontend Engineer to join our team and help build the future of online payments.</p>
      
      <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-50">
        <div class="flex items-center gap-2">
          <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" class="w-6 h-6 rounded-full object-cover">
          <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&fit=crop&crop=faces" class="w-6 h-6 rounded-full object-cover -ml-2">
          <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=64&h=64&fit=crop&crop=faces" class="w-6 h-6 rounded-full object-cover -ml-2">
          <span class="text-xs text-gray-500 ml-1">24 applicants</span>
        </div>
        <span class="text-xs text-gray-400">2 days ago</span>
      </div>
    </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

# Job Listing Card

Job listing card (role, company, meta).

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Role title and company
- Location / type / salary meta

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/job-listing-card
```

Copy from `code.html`.

## Customization

- Badge colors, typography, spacing

## Accessibility

- Prefer real links for the job title if navigational

## Dependencies

- Tailwind CSS only

## File Structure

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