Notice Banner One

<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
  <div
    class="relative flex flex-wrap bg-indigo-500 pl-4 pr-4 px-4 pt-3 pb-3 py-3 sm:flex-nowrap sm:items-center sm:justify-center sm:gap-3 sm:pr-8 md:pl-8 md:pr-8 md:px-8"
  >
    <div
      class="order-1 inline-block sm:order-none mb-2 w-11/12 max-w-screen-sm text-sm text-white sm:mb-0 sm:w-auto md:text-base"
    >
      Stay ahead with weekly insights on product design, growth strategies, and
      new feature rollouts from our team.
    </div>
    <a
      href="#"
      class="order-last inline-block whitespace-nowrap transition duration-100 active:bg-indigo-800 sm:order-none w-full rounded-lg bg-indigo-600 pl-4 pr-4 px-4 pt-2 pb-2 py-2 text-center text-xs font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-700 focus-visible:ring sm:w-auto md:text-sm"
    >
      Discover updates
    </a>
    <div
      class="order-2 sm:right-0 sm:order-none flex w-1/12 items-start justify-end sm:absolute sm:mr-1 sm:w-auto xl:mr-3"
    >
      <button
        type="button"
        class="transition duration-100 active:text-indigo-200 text-white hover:text-indigo-100"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5 md:h-6 md:w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </button>
    </div>
  </div>
</div>