TailwindCSS 聊天对话窗口

<div class="bg-gray-200 h-screen flex flex-col">
  <div class="flex flex-1 overflow-auto">
    <div class="w-1/6 bg-white p-4">
      <!-- 用户信息 -->
      <div class="flex items-center mb-4">
        <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <h3 class="font-bold">John Doe</h3>
      </div>
      <!-- 聊天联系人列表 -->
      <div class="flex flex-col space-y-2">
        <div class="flex items-center p-2 bg-gray-100 rounded-lg">
          <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
          <div>
            <h4 class="font-bold">Jane Doe</h4>
            <p class="text-gray-500 text-sm">Hey, how are you?</p>
          </div>
        </div>
        <div class="flex items-center p-2 bg-gray-100 rounded-lg">
          <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
          <div>
            <h4 class="font-bold">Mark Doe</h4>
            <p class="text-gray-500 text-sm">What's up?</p>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 bg-white p-4">
      <!-- 聊天标题栏 -->
      <div class="flex items-center mb-4">
        <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
        <div>
          <h3 class="font-bold">Jane Doe</h3>
          <p class="text-gray-500 text-sm">Online</p>
        </div>
      </div>
      <!-- 聊天消息列表 -->
      <div class="flex flex-col space-y-4">
        <div class="flex items-center">
          <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
          <div class="bg-gray-100 text-gray-600 p-2 rounded-lg">
            <p>Hi, how are you?</p>
          </div>
        </div>
        <div class="flex justify-end items-center">
          <div class="bg-blue-600 text-white p-2 rounded-lg">
            <p>Hey, I'm doing great, thanks!</p>
          </div>
          <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full ml-2">
        </div>
        <div class="flex items-center">
          <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
          <div class="bg-gray-100 text-gray-600 p-2 rounded-lg">
            <p>What are you up to?</p>
          </div>
        </div>
        <div class="flex justify-end items-center">
          <div class="bg-blue-600 text-white p-2 rounded-lg">
            <p>Just hanging out. You?</p>
          </div>
          <img src="https://via.placeholder.com/50" alt="Avatar" class="w-8 h-8 rounded-full ml-2">
        </div>
      </div>
      <!-- 聊天消息输入框 -->
      <div class="flex items-center mt-4">
        <input type="text" placeholder="Type your message..." class="w-full border-gray-300 border rounded-lg py-2 px-4 mr-2">
        <button class="bg-blue-600 text-white py-2 px-4 rounded-lg">Send</button>
      </div>
    </div>
  </div>
</div>