devsnips
Search docs, APIs, guides…

Component

Activity Feed Card

Activity feed card with grouped events, icons, user avatars, timestamps, and amounts.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Activity list
  • Icons
  • User avatars
  • Timestamps
  • Amount badges

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/cards/activity-feed-card/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Cards/activity-feed-card
registry path: Tailwind/Components/Cards/activity-feed-card

Source

Implementation

code.html 
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
  <div class="p-5 border-b border-gray-100 flex items-center justify-between">
    <h3 class="font-semibold text-gray-900">Activity Feed</h3>
    <button class="text-sm text-blue-600 font-medium hover:text-blue-700">View All</button>
  </div>
  
  <div class="divide-y divide-gray-50">
    <div class="p-4 flex items-start gap-3 hover:bg-gray-50/50 transition-colors">
      <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center shrink-0">
        <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-medium">Payment received</span> from Acme Corp</p>
        <p class="text-xs text-gray-500 mt-0.5">2 minutes ago</p>
      </div>
      <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">+$2,450</span>
    </div>
    
    <div class="p-4 flex items-start gap-3 hover:bg-gray-50/50 transition-colors">
      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=64&h=64&fit=crop&crop=faces" alt="" class="w-10 h-10 rounded-full object-cover shrink-0">
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-medium">Sarah Mitchell</span> commented on your design</p>
        <p class="text-xs text-gray-500 mt-0.5">"The new dashboard looks amazing!"</p>
        <p class="text-xs text-gray-400 mt-0.5">15 minutes ago</p>
      </div>
    </div>
    
    <div class="p-4 flex items-start gap-3 hover:bg-gray-50/50 transition-colors">
      <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-medium">File uploaded</span> to project folder</p>
        <p class="text-xs text-gray-500 mt-0.5">Q4_Report_Final.pdf</p>
        <p class="text-xs text-gray-400 mt-0.5">1 hour ago</p>
      </div>
    </div>
    
    <div class="p-4 flex items-start gap-3 hover:bg-gray-50/50 transition-colors">
      <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center shrink-0">
        <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm text-gray-900"><span class="font-medium">3 new team members</span> joined</p>
        <p class="text-xs text-gray-500 mt-0.5">Engineering team</p>
        <p class="text-xs text-gray-400 mt-0.5">2 hours ago</p>
      </div>
    </div>
  </div>
</div>
56 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/cards/activity-feed-card
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/cards/activity-feed-card/

Install: npx devsnips add
Tailwind/Components/Cards/activity-feed-card

This is the Activity Feed Card — Activity feed card with grouped events, icons, user avatars, timestamps, and amounts.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/cards/activity-feed-card