チャットウィンドウコンポーネント
マテリアルデザインの原則とTailwind CSSでスタイル設定されたレスポンシブチャットウィンドウコンポーネントで、ダークモードをサポートしています。
HTMLコード
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg max-w-md w-full p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Chat Window</h2>
<button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white focus:outline-none">
<span>×</span>
</button>
</div>
<div class="flex flex-col space-y-4 overflow-y-auto h-64">
<div class="flex items-start space-x-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
Hello! How are you?
</div>
</div>
<div class="flex items-start space-x-2 justify-end">
<div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
I am fine, thank you! And you?
</div>
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
</div>
<div class="flex items-start space-x-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white p-2 rounded-lg shadow-md">
Doing great! Just working on some projects.
</div>
</div>
<div class="flex items-start space-x-2 justify-end">
<div class="bg-blue-500 text-white p-2 rounded-lg shadow-md">
That sounds interesting!
</div>
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar">
</div>
</div>
<div class="mt-4">
<input type="text" placeholder="Type your message..." class="w-full bg-gray-100 dark:bg-gray-600 border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">
</div>
</div>