chat tailwindCSS

chat.html

<div class="fixed bottom-4 right-8 border border-gray-200 rounded-lg shadow-md">
  <div class="container mx-auto">
    <!-- Chat container -->
    <div class="container mx-auto">
      <!-- Flex container -->
      <div class="flex">
        <!-- First div -->
        <div class="w-1/2   p-4">
          <!-- lista de contatos -->
          <div class="container mx-auto p-4">
            <!-- Contact list -->
            <ul class="divide-y divide-gray-300">
              <!-- Contact item -->
              <li class="flex items-center py-2">

                <div class="ml-9 px-4 py-3 bg-blue-400 rounded-lg">
                  <p class="font-semibold">Todos</p>
                </div>
              </li>

              <li class="flex items-center py-2">
                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Idris_Elba-4580_%28cropped%29.jpg/250px-Idris_Elba-4580_%28cropped%29.jpg"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>
                <div>
                  <div class="ml-3">
                    <p class="font-semibold">Idris Elba</p>

                  </div>
              </li>

              <!-- Another contact item -->
              <li class="flex items-center py-2">

                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>
                <div>
                  <img
                    src=""
                    alt=""
                  >
                </div>
                <div class="ml-4">
                  <p class="font-semibold">Annie Mac</p>

                </div>
              </li>

              <!-- Another contact item -->
              <li class="flex items-center py-2">
                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2tcjXam-g5z9RSCeYhkv0PxAJ0yBgfmkXgcjMBm-rEGXOHRyroLY0FPtt44Xj1YT8y9A&usqp=CAU"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>
                <div>
                  <div class="ml-4">
                    <p class="font-semibold">Green Velvet</p>

                  </div>
              </li>

              <!-- Another contact item -->
              <li class="flex items-center py-2">
                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2ww7ktQ1fgf49qNUF1ow9nViyyAVUa4R07A&usqp=CAU"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>
                <div>
                  <div class="ml-4">
                    <p class="font-semibold">Norman Cook</p>

                  </div>
              </li>

              <!-- Add more contact items as needed -->

            </ul>
          </div>
        </div>
        <!-- Second div -->
        <div class="w-96 p-4">
          <div class="bg-white shadow-md border rounded-lg max-w-md mx-auto">
            <!-- Messages -->
            <div class="p-4 space-y-4">
              <!-- Message bubble -->
              <div class="flex space-x-2 items-start">

                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>

                <div class="flex-1 bg-blue-400 text-white p-2 rounded-lg">
                  <p>E ai, tudo certo pra Ibiza?</p>
                </div>
              </div>

              <!-- Another message bubble -->
              <div class="flex space-x-2 items-start">
                <div class="flex-1 bg-green-300  p-2 rounded-lg">
                  <p>Quase, eu não sei onde foi parar meu disco do Bob Sinclar.</p>
                </div>
                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2tcjXam-g5z9RSCeYhkv0PxAJ0yBgfmkXgcjMBm-rEGXOHRyroLY0FPtt44Xj1YT8y9A&usqp=CAU"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>
              </div>

              <!-- Add more message bubbles as needed -->
              <div class="flex space-x-2 items-start">

                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>

                <div class="flex-1 bg-blue-400 text-white p-2 rounded-lg">
                  <p>Desde quando você gosta de Bob Sinclar?

                  </p>
                </div>
              </div>
              <!-- message buble -->
              <div class="flex space-x-2 items-start">

                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://i2-prod.bristolpost.co.uk/news/bristol-news/article3942205.ece/ALTERNATES/s1200c/0_JS206725625.jpg"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>

                <div class="flex-1 bg-blue-400 text-white p-2 rounded-lg">
                  <p>Achei que seu estilo era só La La Land.</p>
                </div>
              </div>

              <!-- Another message bubble -->
              <div class="flex space-x-2 items-start">
                <div class="flex-1 bg-green-300  p-2 rounded-lg">
                  <p>kkk, eu sou tão eclético quanto você.</p>
                </div>
                <div class="w-7 h-7 rounded-full overflow-hidden">
                  <img
                    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2tcjXam-g5z9RSCeYhkv0PxAJ0yBgfmkXgcjMBm-rEGXOHRyroLY0FPtt44Xj1YT8y9A&usqp=CAU"
                    alt="Profile"
                    class="object-cover w-full h-full"
                  >
                </div>
              </div>

            </div>

            <!-- Input box -->

            <div class="p-4 border-t border-gray-300 flex">
              <input
                type="text"
                class="flex-1 px-3 py-2 rounded-lg border border-gray-300"
                placeholder="Digite sua mensagem..."
              >
              <button class="w-10 h-10 ml-2 px-2 py-4 bg-blue-500 text-white rounded-full flex items-center">
                <i class="mx-auto">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="lucide lucide-send-horizonal"
                  >
                    <path d="m3 3 3 9-3 9 19-9Z" />
                    <path d="M6 12h16" /></svg>
                </i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>

chat.png