Marketing Announcements Floating with dismiss Dark

<div class="fixed inset-x-0 bottom-0 z-auto p-4">
      <div
        class="flex items-center justify-between rounded border border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
      >
        <span> </span>

        <p class="text-center font-medium">
          Lorem, ipsum dolor
          <a href="#" class="inline-block underline"> sit amet consectetur </a>
        </p>

        <button
          type="button"
          aria-label="Dismiss"
          class="rounded border border-gray-300 bg-white p-1.5 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-5"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>