mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
51 lines
No EOL
1.6 KiB
HTML
51 lines
No EOL
1.6 KiB
HTML
<!-- From Uiverse.io by Cybercom682 - Tags: card, input, chat, bot, chatbot -->
|
|
<div
|
|
class="max-w-md mx-auto bg-white dark:bg-zinc-800 shadow-md rounded-lg overflow-hidden"
|
|
>
|
|
<div class="flex flex-col h-[400px]">
|
|
<div class="px-4 py-3 border-b dark:border-zinc-700">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-lg font-semibold text-zinc-800 dark:text-white">
|
|
Chatbot Assistant
|
|
</h2>
|
|
<div class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">
|
|
Online
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex-1 p-3 overflow-y-auto flex flex-col space-y-2"
|
|
id="chatDisplay"
|
|
>
|
|
<div
|
|
class="chat-message self-end bg-blue-500 text-white max-w-xs rounded-lg px-3 py-1.5 text-sm"
|
|
>
|
|
Hello! How can I assist you today?
|
|
</div>
|
|
<div
|
|
class="chat-message self-start bg-zinc-500 text-white max-w-xs rounded-lg px-3 py-1.5 text-sm"
|
|
>
|
|
Hello! I need a Chatbot!
|
|
</div>
|
|
</div>
|
|
<div class="px-3 py-2 border-t dark:border-zinc-700">
|
|
<div class="flex gap-2">
|
|
<input
|
|
placeholder="Type your message..."
|
|
class="flex-1 p-2 border rounded-lg dark:bg-zinc-700 dark:text-white dark:border-zinc-600 text-sm"
|
|
id="chatInput"
|
|
type="text"
|
|
/>
|
|
<button
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-3 rounded-lg transition duration-300 ease-in-out text-sm"
|
|
id="sendButton"
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|