<div class="bg-blue-50 border border-blue-200 text-blue-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-blue-700">Information</p>
  <p class="text-sm">This is an informational message.</p>
</div>
<div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-green-700">Success</p>
  <p class="text-sm">This is a success message.</p>
</div>

<div class="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-yellow-700">Warning</p>
  <p class="text-sm">This is a warning message.</p>
</div>

<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded shadow-sm mb-4" role="alert">
  <p class="font-semibold text-red-700">Error</p>
  <p class="text-sm">This is an error message.</p>
</div>

  <!-- Info Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-blue-200 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:border-blue-700 dark:text-blue-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z"/>
  </svg>
  <div>
    <p class="font-semibold">Information</p>
    <p class="text-sm">This is an informational alert with a description.</p>
  </div>
</div>

<!-- Success Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-green-200 bg-green-50 text-green-800 dark:bg-green-950 dark:border-green-700 dark:text-green-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M5 13l4 4L19 7"/>
  </svg>
  <div>
    <p class="font-semibold">Success</p>
    <p class="text-sm">This is a success alert with a description.</p>
  </div>
</div>

<!-- Warning Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-yellow-200 bg-yellow-50 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-700 dark:text-yellow-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a1.5 1.5 0 001.29 2.25h17.78a1.5 1.5 0 001.29-2.25L13.71 3.86a1.5 1.5 0 00-2.42 0z"/>
  </svg>
  <div>
    <p class="font-semibold">Warning</p>
    <p class="text-sm">This is a warning alert with a description.</p>
  </div>
</div>

<!-- Error Alert -->
<div class="mb-2 flex items-start gap-3 p-4 rounded-xl border border-red-200 bg-red-50 text-red-800 dark:bg-red-950 dark:border-red-700 dark:text-red-100 shadow-sm" role="alert">
  <svg class="w-5 h-5 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path d="M6 18L18 6M6 6l12 12"/>
  </svg>
  <div>
    <p class="font-semibold">Error</p>
    <p class="text-sm">This is an error alert with a description.</p>
  </div>
</div>

  <div class="max-w-md mx-auto p-4 bg-white shadow-md rounded-md">
    <div class="flex items-center mb-4">
      <svg class="w-8 h-8 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14 2C14 2.74028 13.5978 3.38663 13 3.73244V4H20C21.6569 4 23 5.34315 23 7V19C23 20.6569 21.6569 22 20 22H4C2.34315 22 1 20.6569 1 19V7C1 5.34315 2.34315 4 4 4H11V3.73244C10.4022 3.38663 10 2.74028 10 2C10 0.895431 10.8954 0 12 0C13.1046 0 14 0.895431 14 2ZM4 6H11H13H20C20.5523 6 21 6.44772 21 7V19C21 19.5523 20.5523 20 20 20H4C3.44772 20 3 19.5523 3 19V7C3 6.44772 3.44772 6 4 6ZM15 11.5C15 10.6716 15.6716 10 16.5 10C17.3284 10 18 10.6716 18 11.5C18 12.3284 17.3284 13 16.5 13C15.6716 13 15 12.3284 15 11.5ZM16.5 8C14.567 8 13 9.567 13 11.5C13 13.433 14.567 15 16.5 15C18.433 15 20 13.433 20 11.5C20 9.567 18.433 8 16.5 8ZM7.5 10C6.67157 10 6 10.6716 6 11.5C6 12.3284 6.67157 13 7.5 13C8.32843 13 9 12.3284 9 11.5C9 10.6716 8.32843 10 7.5 10ZM4 11.5C4 9.567 5.567 8 7.5 8C9.433 8 11 9.567 11 11.5C11 13.433 9.433 15 7.5 15C5.567 15 4 13.433 4 11.5ZM10.8944 16.5528C10.6474 16.0588 10.0468 15.8586 9.55279 16.1056C9.05881 16.3526 8.85858 16.9532 9.10557 17.4472C9.68052 18.5971 10.9822 19 12 19C13.0178 19 14.3195 18.5971 14.8944 17.4472C15.1414 16.9532 14.9412 16.3526 14.4472 16.1056C13.9532 15.8586 13.3526 16.0588 13.1056 16.5528C13.0139 16.7362 12.6488 17 12 17C11.3512 17 10.9861 16.7362 10.8944 16.5528Z" fill="#000000"></path> </g></svg>
      <p class="text-gray-800 font-semibold">AI Assistant:</p>
    </div>
    <p class="text-gray-700">Hello! How can I assist you today?</p>
    <div class="mt-4 flex justify-end">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Yes</button>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-2">No</button>
    </div>
  </div>