Card by Cybercom682
#e8e8e8
HTML +TailwindCSS
1<div 2 class="max-w-md mx-auto bg-white dark:bg-zinc-800 shadow-md rounded-lg overflow-hidden" 3> 4 <div class="flex flex-col h-[400px]"> 5 <div class="px-4 py-3 border-b dark:border-zinc-700"> 6 <div class="flex justify-between items-center"> 7 <h2 class="text-lg font-semibold text-zinc-800 dark:text-white"> 8 Chatbot Assistant 9 </h2> 10 <div class="bg-green-500 text-white text-xs px-2 py-1 rounded-full"> 11 Online 12 </div> 13 </div> 14 </div> 15 <div 16 class="flex-1 p-3 overflow-y-auto flex flex-col space-y-2" 17 id="chatDisplay" 18 > 19 <div 20 class="chat-message self-end bg-blue-500 text-white max-w-xs rounded-lg px-3 py-1.5 text-sm" 21 > 22 Hello! How can I assist you today? 23 </div> 24 <div 25 class="chat-message self-start bg-zinc-500 text-white max-w-xs rounded-lg px-3 py-1.5 text-sm" 26 > 27 Hello! I need a Chatbot! 28 </div> 29 </div> 30 <div class="px-3 py-2 border-t dark:border-zinc-700"> 31 <div class="flex gap-2"> 32 <input 33 placeholder="Type your message..." 34 class="flex-1 p-2 border rounded-lg dark:bg-zinc-700 dark:text-white dark:border-zinc-600 text-sm" 35 id="chatInput" 36 type="text" 37 /> 38 <button 39 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" 40 id="sendButton" 41 > 42 Send 43 </button> 44 </div> 45 </div> 46 </div> 47</div> 48
181 views
181 views
MIT License