1
<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-500 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="currentColor"
            class="icon icon-tabler icons-tabler-filled icon-tabler-info-circle size-6"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path
              d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm0 9h-1l-.117 .007a1 1 0 0 0 0 1.986l.117 .007v3l.007 .117a1 1 0 0 0 .876 .876l.117 .007h1l.117 -.007a1 1 0 0 0 .876 -.876l.007 -.117l-.007 -.117a1 1 0 0 0 -.764 -.857l-.112 -.02l-.117 -.006v-3l-.007 -.117a1 1 0 0 0 -.876 -.876l-.117 -.007zm.01 -3l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z"
            ></path>
          </svg>
        </div>
        <div>
          <h3 class="text-base font-medium text-blue-800">Good to know</h3>
          <div class="mt-2 text-sm text-blue-700">
            <p>
              A new feature is available. You will be notified when it is ready.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
alerts
