<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex flex-col"> <header class="bg-white shadow-lg p-4 flex justify-between items-center"> <div class="flex items-center space-x-4"> <i class="iconoir-robot text-2xl"></i> <span class="font-bold text-xl">ChatBot</span> </div> <div class="flex items-center space-x-4"> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-search text-2xl"></i> </button> <button class="text-gray-700 hover:text-gray-900"> <i class="iconoir-user text-2xl"></i> </button> </div> </header> <div class="flex flex-1 overflow-hidden"> <aside class="bg-white w-64 p-4 border-r overflow-y-auto"> <div class="mb-4"> <input type="text" placeholder="Search..." class="w-full p-2 border rounded"> </div> <ul> <li class="mb-4"> <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-200 rounded"> <i class="iconoir-user text-2xl"></i> <div> <p class="font-bold">John Doe</p> <p class="text-sm text-gray-600">Hey, how are you?</p> </div> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-200 rounded"> <i class="iconoir-user text-2xl"></i> <div> <p class="font-bold">Jane Smith</p> <p class="text-sm text-gray-600">Let's catch up later.</p> </div> </a> </li> <li class="mb-4"> <a href="#" class="flex items-center space-x-4 p-2 hover:bg-gray-200 rounded"> <i class="iconoir-user text-2xl"></i> <div> <p class="font-bold">Alice Johnson</p> <p class="text-sm text-gray-600">Can you send me the file?</p> </div> </a> </li> </ul> </aside> <main class="flex-1 flex flex-col"> <div class="flex-1 p-4 overflow-y-auto"> <div class="flex flex-col space-y-4"> <div class="self-start bg-white p-4 rounded shadow max-w-xs"> <p class="font-bold">ChatBot</p> <p>Hello! How can I assist you today?</p> </div> <div class="self-end bg-blue-500 text-white p-4 rounded shadow max-w-xs"> <p class="font-bold">You</p> <p>I need help with my order.</p> </div> <div class="self-start bg-white p-4 rounded shadow max-w-xs"> <p class="font-bold">ChatBot</p> <p>Sure, I can help with that. Can you provide your order number?</p> </div> </div> </div> <div class="p-4 bg-white border-t"> <div class="flex items-center space-x-4"> <input type="text" placeholder="Type a message..." class="flex-1 p-2 border rounded"> <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-400"> <i class="iconoir-arrow-right text-2xl"></i> </button> </div> </div> </main> </div> </body>
v