<div class="max-w-xl mx-auto bg-white rounded-md p-4 shadow-md">
  <!-- AI Assistant heading with online status -->
  <div class="flex items-center mb-4">
    <div class="w-3 h-3 bg-green-400 rounded-full mr-2"></div>
    <h2 class="text-gray-700 font-semibold">AI Assistant</h2>
  </div>
  <!-- User message -->
  <div class="flex items-start mb-4">
    <img src="https://ui-avatars.com/api/?name=John+Doe" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
    <div class="bg-blue-500 rounded-lg p-2">
      <p class="text-white">Hi! How can I help you?</p>
    </div>
  </div>

  <!-- AI message -->
  <div class="flex items-start justify-end mb-4">
    <div class="bg-gray-50 rounded-lg p-2">
      <p class="text-gray-800">Sure! I'm here to assist you.</p>
    </div>
    <img src="https://ui-avatars.com/api/?name=AI" alt="AI Avatar" class="w-8 h-8 rounded-full ml-2">
  </div>

  <!-- User message -->
  <div class="flex items-start mb-4">
    <img src="https://ui-avatars.com/api/?name=John+Doe" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
    <div class="bg-blue-500 rounded-lg p-2">
      <p class="text-white">Need more information?</p>
    </div>
  </div>

  <!-- AI message -->
  <div class="flex items-start justify-end mb-4">
    <div class="bg-gray-50 rounded-lg p-2">
      <p class="text-gray-800">Of course! We offer a wide range of services...</p>
    </div>
    <img src="https://ui-avatars.com/api/?name=AI" alt="AI Avatar" class="w-8 h-8 rounded-full ml-2">
  </div>

  <!-- Input field for new message -->
  <div class="flex items-center mt-4">
    <input type="text" placeholder="Type your message..." class="flex-1 p-2 border ml-2 bg-gray-50 rounded-full">
    <button class="bg-blue-500 text-white p-2 rounded-full ml-2">Send</button>
  </div>
</div>

  <div class="relative bg-white w-96 h-64 shadow-md rounded-md overflow-hidden">
    
    <!-- Address Bar -->
    <div class="flex items-center p-2 bg-gray-100 border-b border-gray-200">
      <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
      <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
      <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
      <input type="text" class="flex-1 bg-transparent outline-none" placeholder="Search or type URL">
    </div>
    
    <!-- Webpage Content -->
    <div class="p-4">
      <h1 class="text-xl font-bold mb-4">Welcome to My Website</h1>
      <p class="text-gray-600">This is a simple and clean Chrome browser mockup designed using Tailwind CSS.</p>
      <!-- Add your webpage content here -->
    </div>
  </div>