devsnips
Search docs, APIs, guides…

Component

Chat Conversation Card

Chat interface card with conversation thread, message bubbles, timestamps, and input field.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • User header
  • Message bubbles
  • Timestamps
  • Input field
  • Action buttons

Preview

Live component

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

Install

Add to your project

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

Source

Implementation

code.html 
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
  <div class="p-4 border-b border-gray-100 bg-gray-50/50 flex items-center gap-3">
    <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=128&h=128&fit=crop&crop=faces" alt="Alex Thompson" class="w-10 h-10 rounded-full object-cover">
    <div class="flex-1">
      <h4 class="font-semibold text-gray-900">Alex Thompson</h4>
      <p class="text-xs text-gray-500">Online</p>
    </div>
    <div class="flex gap-2">
      <button class="p-2 hover:bg-gray-200 rounded-full text-gray-500 transition-colors">
        <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
        </svg>
      </button>
      <button class="p-2 hover:bg-gray-200 rounded-full text-gray-500 transition-colors">
        <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>
  
  <div class="p-4 space-y-4 h-72 overflow-y-auto">
    <div class="flex gap-3">
      <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=128&h=128&fit=crop&crop=faces" alt="" class="w-8 h-8 rounded-full object-cover shrink-0">
      <div class="bg-gray-100 rounded-2xl rounded-tl-none px-4 py-2.5 max-w-[75%]">
        <p class="text-sm text-gray-900">Hey! Have you had a chance to review the design mockups I sent?</p>
        <p class="text-xs text-gray-500 mt-1">10:32 AM</p>
      </div>
    </div>
    
    <div class="flex gap-3 justify-end">
      <div class="bg-blue-600 rounded-2xl rounded-tr-none px-4 py-2.5 max-w-[75%]">
        <p class="text-sm text-white">Yes! I love the new direction. The color palette is perfect.</p>
        <p class="text-xs text-blue-200 mt-1 text-right">10:34 AM</p>
      </div>
    </div>
    
    <div class="flex gap-3">
      <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=128&h=128&fit=crop&crop=faces" alt="" class="w-8 h-8 rounded-full object-cover shrink-0">
      <div class="bg-gray-100 rounded-2xl rounded-tl-none px-4 py-2.5 max-w-[75%]">
        <p class="text-sm text-gray-900">Great! Should we schedule a call to discuss the implementation timeline?</p>
        <p class="text-xs text-gray-500 mt-1">10:36 AM</p>
      </div>
    </div>
    
    <div class="flex gap-3 justify-end">
      <div class="bg-blue-600 rounded-2xl rounded-tr-none px-4 py-2.5 max-w-[75%]">
        <p class="text-sm text-white">How about tomorrow at 2 PM?</p>
        <p class="text-xs text-blue-200 mt-1 text-right">10:38 AM</p>
      </div>
    </div>
  </div>
  
  <div class="p-4 border-t border-gray-100">
    <div class="flex items-center gap-3">
      <button class="p-2 hover:bg-gray-100 rounded-full text-gray-400 transition-colors">
        <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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
        </svg>
      </button>
      <input type="text" placeholder="Type a message..." class="flex-1 px-4 py-2.5 bg-gray-100 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="p-2.5 bg-blue-600 hover:bg-blue-700 rounded-full text-white transition-colors">
        <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 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
        </svg>
      </button>
    </div>
  </div>
</div>
69 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/chat-conversation-card
Prompt instruction 
I want to use this DevSnips resource in production:

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

Install: npx devsnips add
Tailwind/Components/Cards/chat-conversation-card

This is the Chat Conversation Card — Chat interface card with conversation thread, message bubbles, timestamps, and input field.

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/chat-conversation-card