Robot
Henrik Aronsson

<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-user text-2xl"></i>
          <span class="font-bold text-xl">Anslagstavla</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="Sök..." 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">Vad tycker ni om den nya parken?</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">Någon som vill ha en bokklubb?</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">Grillfest på lördag!</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">John Doe</p>
                      <p>Vad tycker ni om den nya parken?</p>
                  </div>
                  <div class="self-end bg-blue-500 text-white p-4 rounded shadow max-w-xs">
                      <p class="font-bold">Du</p>
                      <p>Jag tycker den är fantastisk!</p>
                  </div>
                  <div class="self-start bg-white p-4 rounded shadow max-w-xs">
                      <p class="font-bold">Jane Smith</p>
                      <p>Någon som vill ha en bokklubb?</p>
                  </div>
                  <div class="self-end bg-blue-500 text-white p-4 rounded shadow max-w-xs">
                      <p class="font-bold">Du</p>
                      <p>Jag är intresserad!</p>
                  </div>
              </div>
          </div>
          <div class="p-4 bg-white border-t">
              <div class="flex items-center space-x-4">
                  <input type="text" placeholder="Skriv ett meddelande..." 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>