チャットウィンドウコンポーネント
パステルカラーとインタラクティブ機能を備えたモダンな3Dデザインを紹介するレスポンシブチャットウィンドウコンポーネントで、ポートフォリオディスプレイに適しています。
HTMLコード
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6">
<div class="mb-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-gray-600 shadow-lg">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
</div>
</div>
<div class="h-64 overflow-y-auto rounded-lg border border-gray-300 dark:border-gray-600 p-4 bg-gray-50 dark:bg-gray-700 shadow-inner">
<div class="mb-2 flex items-start">
<img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
<div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
<p class="text-sm text-gray-800 dark:text-gray-200">Hello! How can I assist you today?</p>
</div>
</div>
<div class="mb-2 flex items-start justify-end">
<div class="mr-2 bg-blue-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
<p class="text-sm text-gray-800 dark:text-gray-200">I'm looking for some information on your services.</p>
</div>
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-purple-300 dark:border-gray-600">
</div>
<div class="mb-2 flex items-start">
<img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
<div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
<p class="text-sm text-gray-800 dark:text-gray-200">Sure! Here’s what you need to know...</p>
</div>
</div>
</div>
<form class="mt-4">
<div class="flex items-center border rounded-lg border-gray-300 dark:border-gray-600 overflow-hidden">
<input type="text" placeholder="Type your message..." class="flex-grow p-2 text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none" />
<button type="submit" class="bg-pink-400 dark:bg-pink-600 text-white px-4 py-2 rounded-lg">Send</button>
</div>
</form>
</div>
関連コンポーネント
スキューモーフィックチャットウィンドウ
Skeuomorphism と Tailwind CSS でスタイル設定されたチャット ウィンドウ Web コンポーネント。レスポンシブレイアウト、CSSによるダークテーマのサポート、丸みを帯びたメッセージバブル、グラデーション、触感のあるシャドウを備えています。プレースホルダーのアバターと画像が含まれています。JavaScript は含まれていません。
チャットウィンドウコンポーネント
有機的/自然にインスパイアされたデザイン、ネオン/エレクトリックの配色、ダークモードのサポートを備えたシンプルで応答性の高いチャットウィンドウコンポーネントで、予約/予約システムに適しています。
チャットウィンドウコンポーネント
適度な複雑さとインタラクティブな機能を備えたダッシュボード用の3次元グレースケールチャットウィンドウコンポーネント。ダークテーマをサポートするレスポンシブデザイン。