devsnips
Search docs, APIs, guides…

Component

Project Card

Project overview card with gradient header, progress bar, team avatars, status badge, and metadata.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Gradient header
  • Status badge
  • Progress bar
  • Team avatars
  • Task count

Preview

Live component

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

Install

Add to your project

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

Source

Implementation

code.html 
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden hover:shadow-lg transition-all group">
  <div class="relative h-36 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
    <div class="absolute inset-0 flex items-center justify-center">
      <svg class="w-16 h-16 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
      </svg>
    </div>
    <div class="absolute top-3 right-3">
      <button class="p-2 bg-white/20 backdrop-blur rounded-lg text-white hover:bg-white/30 transition-colors">
        <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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"/>
        </svg>
      </button>
    </div>
  </div>
  
  <div class="p-5">
    <div class="flex items-start justify-between mb-2">
      <div>
        <h3 class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">Website Redesign</h3>
        <p class="text-sm text-gray-500">Marketing Website • Q1 2025</p>
      </div>
      <span class="px-2.5 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full">In Progress</span>
    </div>
    
    <p class="text-sm text-gray-600 mb-4 line-clamp-2">Complete redesign of the company marketing website with new brand guidelines and improved UX.</p>
    
    <div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
      <div class="flex items-center gap-1">
        <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
        </svg>
        <span>24 tasks</span>
      </div>
      <div class="flex items-center gap-1">
        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <span>Due Feb 28</span>
      </div>
    </div>
    
    <div class="mb-4">
      <div class="flex justify-between text-xs text-gray-500 mb-1.5">
        <span>Progress</span>
        <span>68%</span>
      </div>
      <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
        <div class="h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full" style="width: 68%"></div>
      </div>
    </div>
    
    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
      <div class="flex -space-x-2">
        <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 class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-600">+5</div>
      </div>
      <button class="text-sm text-blue-600 font-medium hover:text-blue-700">Open →</button>
    </div>
  </div>
</div>
63 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/project-card
Prompt instruction 
I want to use this DevSnips resource in production:

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

Install: npx devsnips add
Tailwind/Components/Cards/project-card

This is the Project Card — Project overview card with gradient header, progress bar, team avatars, status badge, and metadata.

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/project-card