チャットウィンドウコンポーネント
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>