Event 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

<div class="group bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=600&h=300&fit=crop" alt="Tech Conference 2025" class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-500">
    <div class="absolute top-4 left-4">
      <div class="bg-white rounded-xl px-4 py-2 text-center shadow-lg">
        <p class="text-xs text-gray-500 uppercase">Mar</p>
        <p class="text-xl font-bold text-gray-900">15</p>
      </div>
    </div>
    <div class="absolute top-4 right-4">
      <span class="px-3 py-1 bg-orange-500 text-white text-xs font-semibold rounded-full">HAPPENING SOON</span>
    </div>
  </div>
  
  <div class="p-5">
    <div class="flex items-center gap-4 text-sm text-gray-500 mb-3">
      <div class="flex items-center gap-1.5">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span>9:00 AM - 5:00 PM</span>
      </div>
      <div class="flex items-center gap-1.5">
        <svg class="w-4 h-4" 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"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        <span>San Francisco, CA</span>
      </div>
    </div>
    
    <h3 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">Tech Conference 2025</h3>
    <p class="text-sm text-gray-600 mb-4">Annual developer conference featuring the latest in AI, cloud computing, and web technologies.</p>
    
    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
      <div class="flex items-center gap-2">
        <div class="flex -space-x-3">
          <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" class="w-8 h-8 rounded-full border-2 border-white" alt="">
          <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=64&h=64&fit=crop&crop=faces" class="w-8 h-8 rounded-full border-2 border-white" alt="">
          <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=64&h=64&fit=crop&crop=faces" class="w-8 h-8 rounded-full border-2 border-white" alt="">
        </div>
        <span class="text-sm text-gray-500">+248 going</span>
      </div>
      <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
        RSVP
      </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

# Event Card

Event listing card (date, title, location).

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Date emphasis
- Title and meta

## Usage

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

Copy from `code.html`.

## Customization

- Date badge styling, typography, spacing

## Accessibility

- Prefer machine-readable dates when possible

## Dependencies

- Tailwind CSS only

## File Structure

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