Skip to content
HyperUI

No results found.

Back to marketing components

Announcements

Discover announcement components built with Tailwind CSS. These responsive, accessible banners and notification bars are perfect for marketing websites, SaaS products, and eCommerce stores. Easily highlight updates, promotions, or important messages with customizable UI elements optimized for SEO and user engagement.

6/6 Dark Mode Updated: Jul 4, 2026

Base

markmead

<div class="border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900">
  <p class="text-center font-medium">
    Lorem, ipsum dolor
    <a href="#" class="inline-block underline"> sit amet consectetur </a>
  </p>
</div>

Base (Dark)

WinnyChang

<div
  class="border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
  <p class="text-center font-medium">
    Lorem, ipsum dolor
    <a href="#" class="inline-block underline"> sit amet consectetur </a>
  </p>
</div>

Base with dismiss

markmead

<div
  class="flex items-center justify-between border-b border-gray-200 bg-gray-100 px-4 py-2 text-gray-900"
>
  <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"
  >
    <svg
      aria-hidden="true"
      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>

Base with dismiss (Dark)

WinnyChang

<div
  class="flex items-center justify-between border-b 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
      aria-hidden="true"
      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>

Fixed

markmead

<div
  class="fixed inset-x-0 bottom-0 z-auto border-t border-gray-200 bg-gray-100 px-4 py-2 text-gray-900"
>
  <p class="text-center font-medium">
    Lorem, ipsum dolor
    <a href="#" class="inline-block underline"> sit amet consectetur </a>
  </p>
</div>

Fixed (Dark)

WinnyChang

<div
  class="fixed inset-x-0 bottom-0 z-auto border-t border-gray-200 bg-gray-100 px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
>
  <p class="text-center font-medium">
    Lorem, ipsum dolor
    <a href="#" class="inline-block underline"> sit amet consectetur </a>
  </p>
</div>

Fixed with dismiss

markmead

<div
  class="fixed inset-x-0 bottom-0 z-auto flex items-center justify-between border-t border-gray-200 bg-gray-100 px-4 py-2 text-gray-900"
>
  <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"
  >
    <svg
      aria-hidden="true"
      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>

Fixed with dismiss (Dark)

WinnyChang

<div
  class="fixed inset-x-0 bottom-0 z-auto flex items-center justify-between border-t 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
      aria-hidden="true"
      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>

Floating

markmead

<div class="fixed inset-x-0 bottom-0 z-auto p-4">
  <div class="rounded border border-gray-200 bg-gray-100 px-4 py-2 text-gray-900">
    <p class="text-center font-medium">
      Lorem, ipsum dolor
      <a href="#" class="inline-block underline"> sit amet consectetur </a>
    </p>
  </div>
</div>

Floating (Dark)

WinnyChang

<div class="fixed inset-x-0 bottom-0 z-auto p-4">
  <div
    class="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"
  >
    <p class="text-center font-medium">
      Lorem, ipsum dolor
      <a href="#" class="inline-block underline"> sit amet consectetur </a>
    </p>
  </div>
</div>

Floating with dismiss

markmead

<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"
  >
    <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"
    >
      <svg
        aria-hidden="true"
        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>

Floating with dismiss (Dark)

WinnyChang

<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
        aria-hidden="true"
        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>

Related components

View all marketing components