Tailwind CSS Announcement Banners Blocks

All Blocks
Marketing
Announcement Banners

Announcement Banners

Announcement banners, promo bars, and dismissible marketing alerts for launches, offers, product updates, and campaign messaging.

A short promo line and dismiss action sit together in one compact banner row.

<div id="hs-pro-shchal" class="mb-5 p-4 sm:ps-16 relative overflow-hidden bg-linear-to-r from-orange-100 via-purple-200 via-70% to-indigo-200 rounded-lg dark:from-orange-800 dark:via-purple-800 dark:to-indigo-800" role="alert" tabindex="-1" aria-labelledby="hs-pro-shchal-label">
                      <div class="flex items-center gap-x-3">
                        <div class="hidden sm:block absolute -bottom-4 -inset-s-6">
                          <span class="text-7xl">🎁</span>
                        </div>
                        <div class="grow">
                          <p id="hs-pro-shchal-label" class="font-medium text-orange-700 dark:text-foreground-inverse">
                            Choose your free gift
                          </p>
                          <p class="mt-1 text-xs text-foreground">
                            When you spend $30. Use code SUMMER.
                          </p>
                        </div>

<button type="button" class="size-7 inline-flex justify-center items-center gap-x-1 rounded-full text-xs border border-transparent text-foreground hover:bg-primary-300 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-300 dark:text-purple-300 dark:hover:bg-primary-700 dark:focus:bg-primary-700" data-hs-remove-element="#hs-pro-shchal">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          <span class="sr-only">Remove</span>
                        </button>
                      </div>
                    </div>

Open related storefront cart page

One narrow strip combines promo copy with account links in the same row.

<div class="py-4 px-6 relative overflow-hidden bg-linear-to-r from-orange-100 via-purple-200 via-70% to-indigo-200 dark:from-orange-800 dark:via-purple-800 dark:to-indigo-800" role="alert" tabindex="-1" aria-labelledby="hs-pro-shfshal-label">
                      <p id="hs-pro-shfshal-label" class="font-medium text-layer-foreground">
                        Free shipping on orders over $50
                      </p>
                      <p class="mt-1 text-xs text-muted-foreground-1">
                        <a class="font-medium text-xs text-layer-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/login.html">Log In</a> or <a class="font-medium text-xs text-layer-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/create-account.html">Register</a>
                      </p>
                    </div>

Open related storefront cart page

Short announcement slides rotate inside one compact banner track.

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0",
                        "isAutoHeight": "true",
                        "isAutoPlay": true
                      }' class="relative">
                      <div class="hs-carousel relative overflow-hidden w-full bg-surface rounded-lg">
                        <div class="hs-carousel-body flex flex-nowrap items-start overflow-hidden transition-[height,transform] duration-700 opacity-0">
                          <div class="hs-carousel-slide p-3 text-center h-auto">
                            <p class="flex justify-center items-center gap-x-2 text-xs text-foreground">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                              Trending item - 71 sold in the last day
                            </p>
                          </div>

<div class="hs-carousel-slide p-3 text-center h-auto">
                            <p class="flex justify-center items-center gap-x-2 text-xs text-foreground">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                              Popular - 25 people are looking at this now
                            </p>
                          </div>
      
                          <div class="hs-carousel-slide p-3 text-center h-auto">
                            <p class="flex justify-center items-center gap-x-2 text-xs text-foreground">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                              Model is 6' 0" tall and is wearing size 10.
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>

Open related product detail page

Copy and action sit inside one soft-edged banner with a blurred background treatment.

<div class="bg-layer/60 backdrop-blur-lg">
  <div class="max-w-340 px-4 py-4 sm:px-6 lg:px-8 mx-auto">
    
    <div class="grid justify-center sm:grid-cols-2 sm:items-center gap-4">
      <div class="flex items-center gap-x-3 md:gap-x-5">
        <svg class="shrink-0 size-10 md:size-14" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="40" height="40" rx="6" fill="currentColor" class="fill-primary"/>
          <path d="M8 32.5V19.5C8 12.8726 13.3726 7.5 20 7.5C26.6274 7.5 32 12.8726 32 19.5C32 26.1274 26.6274 31.5 20 31.5H19" stroke="white" stroke-width="2"/>
          <path d="M12 32.5V19.66C12 15.1534 15.5817 11.5 20 11.5C24.4183 11.5 28 15.1534 28 19.66C28 24.1666 24.4183 27.82 20 27.82H19" stroke="white" stroke-width="2"/>
          <circle cx="20" cy="19.5214" r="5" fill="white"/>
        </svg>

<div class="grow">
          <p class="md:text-xl text-foreground font-semibold">
            Get started today.
          </p>
          <p class="text-sm md:text-base text-foreground">
            Sign up to get unlimited updates.
          </p>
        </div>
      </div>

<div class="text-center sm:text-start flex sm:justify-end sm:items-center gap-x-3 md:gap-x-4">
        <a class="py-2 px-3 md:py-3 md:px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
          Free trial
        </a>
        <a class="py-2 px-3 md:py-3 md:px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border border-line-8 text-foreground hover:border-line-5 hover:text-line-5 focus:outline-hidden focus:text-muted-foreground-1 disabled:opacity-50 disabled:pointer-events-none" href="#">
          Buy now
        </a>
      </div>
      
    </div>
    
  </div>
</div>

A short message and one primary button share a single gradient banner row.

<div class="bg-linear-to-r from-red-500 via-purple-400 to-primary">
  <div class="max-w-340 px-4 py-4 sm:px-6 lg:px-8 mx-auto">
    
    <div class="grid justify-center md:grid-cols-2 md:justify-between md:items-center gap-2">
      <div class="text-center md:text-start">
        <p class="text-xs text-white/80 uppercase">
          Preview of Preline
        </p>
        <p class="mt-1 text-white font-medium">
          Sign up to get unlimited updates. No credit card required.
        </p>
      </div>

The message stretches full width and keeps the dismiss control at the edge of the bar.

<div id="ab-full-width-with-dismiss-button-on-blue-bg" class="hs-removing:-translate-y-full bg-primary">
  <div class="max-w-340 px-4 py-4 sm:px-6 lg:px-8 mx-auto">
    <div class="flex">
      <p class="text-foreground-inverse">
        Preline UI Figma is live. <a class="decoration-2 underline font-medium hover:text-foreground-inverse/80 focus:outline-hidden focus:text-foreground-inverse/80" href="../../../figma/">Learn more</a>
      </p>
      
      <div class="ps-3 ms-auto">
        <button type="button" class="inline-flex rounded-lg p-1.5 text-foreground-inverse/80 hover:bg-plain/10 focus:outline-hidden focus:bg-plain/10" data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg">
          <span class="sr-only">Dismiss</span>
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
      </div>
    </div>
  </div>
</div>

Centered copy and action sit over a banner with decorative background elements.

<div class="max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
  <div class="bg-blue-600 bg-[url('https://preline.co/assets/svg/examples/abstract-1.svg')] bg-no-repeat bg-cover bg-center p-4 rounded-lg text-center">
    <div class="flex flex-wrap justify-center items-center gap-2">
      <p class="inline-block text-foreground-inverse">
        Preline UI Figma is live.
      </p>
      <a class="py-1.5 px-2.5 md:py-2 md:px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-full border-2 border-line-inverse text-foreground-inverse hover:border-line-inverse/70 hover:text-foreground-inverse/70 focus:outline-hidden focus:border-line-inverse/70 focus:text-foreground-inverse/70 disabled:opacity-50 disabled:pointer-events-none" href="../../../figma/">
        Learn more
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
      </a>
    </div>
  </div>
</div>

A small pill label and one inline link keep the banner row light and compact.

Two inline links sit beside the message inside one gradient announcement bar.

<div class="bg-linear-to-r from-purple-600 to-blue-400">
  <div class="max-w-340 px-4 py-4 sm:px-6 lg:px-8 mx-auto">
    
    <div class="grid justify-center md:grid-cols-2 md:justify-between md:items-center gap-2">
      <div class="text-center md:text-start md:order-2 md:flex md:justify-end md:items-center">
        <p class="me-5 inline-block text-sm font-semibold text-foreground-inverse">
          Ready to get started?
        </p>
        <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border-2 border-line-inverse text-foreground-inverse hover:border-line-inverse/70 hover:text-foreground-inverse/70 focus:outline-hidden focus:border-line-inverse/70 focus:text-foreground-inverse/70 disabled:opacity-50 disabled:pointer-events-none" href="#">
          Sign up
        </a>
      </div>

<div class="flex items-center">
        <a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-lg font-medium text-foreground-inverse hover:bg-plain/10 focus:outline-hidden focus:bg-plain/10 transition text-sm" href="#">
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          Watch demo
        </a>
        <span class="inline-block border-e border-line-inverse/30 w-px h-5 mx-2"></span>
        <a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-lg font-medium text-foreground-inverse hover:bg-plain/10 focus:outline-hidden focus:bg-plain/10 transition text-sm" href="#">
          Explore what's new
        </a>
      </div>
      
    </div>
    
  </div>
</div>

A single centered link sits inside a full-width banner with minimal surrounding detail.

Announcement Banners

Rotating Announcement Banner Pro

Blurred Background CTA Banner Free

Gradient Banner with CTA Button Free

Full-Width Dismissible Announcement Banner Free

Centered Announcement Banner with Background Illustration Free

Announcement Banner with Pill Label Link Free

Gradient Announcement Banner with Dual Links Free

Full-Width Banner with Centered Link Free