Broadcast Message

<div class="fixed left-0 top-0 z-40 w-full bg-gray-900 shadow-md">
  <div class="mx-auto flex w-full max-w-7xl items-center justify-center px-4 py-3">
    <span class="text-sm text-white">20% off this weekend only!</span>
  </div>
</div>

<div class="fixed left-0 top-0 z-40 w-full bg-gray-900 shadow-md">
  <div class="mx-auto flex w-full max-w-7xl items-center justify-center space-x-3 px-4 py-3">
    <!-- Heroicons name: outline/megaphone -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-5 shrink-0 text-white"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"
      />
    </svg>
    <span class="text-sm text-white">20% off this weekend only!</span>
  </div>
</div>

<div class="fixed left-0 top-0 z-40 w-full bg-gray-900 shadow-md">
  <div class="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-3">
    <div class="flex items-center justify-center space-x-2">
      <!-- Herocions name: outline/clock -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="size-5 shrink-0 text-white"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <span class="text-sm text-white">
        We use cookies to enhance your user experience. By continuing to visit this site you agree to
        <a href="#" class="underline">our use of cookies</a>.
      </span>
    </div>
    <button class="ml-2">
      <!-- Herocions name: mini/x-mark -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-white">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </div>
</div>