聊天窗口组件
一个具有深色模式支持并使用 Tailwind CSS 的响应式聊天窗口组件。它具有包含用户信息的标题、显示收发消息的消息区域，以及用于输入新消息的页脚。图像是来自 picsum.photos 和 randomuser.me 的占位符。
HTML 代码
<div class="flex flex-col h-screen bg-gray-900 text-gray-200">
<!-- Header -->
<header class="flex items-center justify-between p-4 bg-gray-800">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h1 class="text-lg font-semibold">Chat User</h1>
</div>
<!-- Add any header icons here -->
</header>
<!-- Message Area -->
<div class="flex-1 overflow-y-auto p-4">
<!-- Incoming Message -->
<div class="flex items-start mb-4">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Other User Avatar">
<div class="flex flex-col">
<div class="bg-gray-700 text-gray-200 p-3 rounded-lg mb-1">
Hello! How are you?
</div>
<span class="text-xs text-gray-500">10:00 AM</span>
</div>
</div>
<!-- Outgoing Message -->
<div class="flex items-end justify-end mb-4">
<div class="flex flex-col items-end">
<div class="bg-blue-600 text-white p-3 rounded-lg mb-1">
I'm good, thanks! How about you?
</div>
<span class="text-xs text-gray-500">10:05 AM</span>
</div>
<img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
<!-- Add more messages here -->
</div>
<!-- Footer -->
<footer class="flex items-center p-4 bg-gray-800">
<input type="text" class="flex-1 rounded-full px-4 py-2 mr-4 bg-gray-700 text-gray-200 focus:outline-none" placeholder="Type your message...">
<button class="bg-blue-600 text-white rounded-full p-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/>
</svg>
</button>
</footer>
</div>