<div role="alert" class="alert alert-error max-sm:flex max-sm:flex-col max-sm:items-start">
  <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-triangle-alert text-error-content">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
    <path d="M12 9v4" />
    <path d="M12 17h.01" />
  </svg>

  <div>
    <p class="font-semibold text-error-content">Error</p>
    <p class="text-sm max-w-2xl text-error-content/80">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga assumenda cumque laudantium, quae totam earum
      voluptatem excepturi.
    </p>

    <code class="bg-error-content/10 text-error-content rounded-lg p-4 mt-4 block overflow-x-auto">
      <span class="block">npm install @tailwindcss/forms</span>
      <span class="block">npm install @tailwindcss/typography</span>
      <span class="block">npm install @tailwindcss/aspect-ratio</span>
    </code>
  </div>
</div>

<div role="alert" class="alert alert-success max-sm:flex max-sm:flex-col max-sm:items-start">
  <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-check text-success-content">
    <path d="M20 6 9 17l-5-5" />
  </svg>

  <div>
    <p class="font-semibold text-success-content">Error</p>
    <p class="text-sm max-w-2xl text-success-content/80">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga assumenda cumque laudantium, quae totam earum
      voluptatem excepturi.
    </p>
  </div>

  <button class="btn btn-success">
    <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-x">
      <line x1="18" x2="6" y1="6" y2="18" />
      <line x1="6" x2="18" y1="6" y2="18" />
    </svg>

    Close
  </button>
</div>

<div role="alert" class="alert alert-error max-sm:flex max-sm:flex-col max-sm:items-start">
  <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-triangle-alert text-error-content">
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
    <path d="M12 9v4" />
    <path d="M12 17h.01" />
  </svg>

  <div>
    <p class="font-semibold text-error-content">Error</p>
    <p class="text-sm max-w-2xl text-error-content/80">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga assumenda cumque laudantium, quae totam earum
      voluptatem excepturi.
    </p>
  </div>
</div>