alerts1

<section>
  <div
    class="items-center px-8 py-12 mx-auto max-w-7xl lg:px-16 md:px-12 lg:py-24"
  >
    <div
      class="relative bg-blue-50 border border-blue-100 text-blue-600 rounded-xl p-8"
    >
      <div class="flex gap-2">
        <div class="flex-shrink-0">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="icon icon-tabler icons-tabler-outline icon-tabler-circle-info size-5"
            slot="icon"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
            <path d="M12 9h.01"></path>
            <path d="M11 12h1v4h1"></path>
          </svg>
        </div>
        <div>
          <p class="text-base leading-normal text-blue-800 font-medium">
            Good to know
          </p>
          <p class="text-sm leading-normal text-blue-600 font-medium">
            A new feature is available. You will be notified when it is ready.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>