Announcement Banners
Quickly get a project started with any of our examples ranging from using parts of the UI to custom components and layouts using Tailwind CSS.
Media Object Style with Blurred Background
<!-- Announcement Banner -->
<div class="bg-white/[.6] backdrop-blur-lg dark:bg-slate-900/[.6]">
<div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
<!-- Grid -->
<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="flex-shrink-0 w-10 h-10 md:w-14 md:h-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-blue-600"/>
<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-gray-800 font-semibold dark:text-gray-200">
Get started today.
</p>
<p class="text-sm md:text-base text-gray-800 dark:text-gray-200">
Sign up to get unlimited updates.
</p>
</div>
</div>
<!-- End Col -->
<div class="text-center sm:text-start flex sm:justify-end sm:items-center gap-x-3 md:gap-x-4">
<a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Free trial
</a>
<a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-gray-800 text-gray-800 hover:border-gray-500 hover:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:border-white dark:text-white dark:hover:text-gray-300 dark:hover:border-gray-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Buy now
</a>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
</div>
<!-- End Announcement Banner -->
A Button on Gradient Background
<!-- Announcement Banner -->
<div class="bg-gradient-to-r from-red-500 via-purple-400 to-blue-500">
<div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
<!-- Grid -->
<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/[.8] uppercase tracking-wider">
Preview of Preline
</p>
<p class="mt-1 text-white font-medium">
Sign up to get unlimited updates. No credit card required.
</p>
</div>
<!-- End Col -->
<div class="mt-3 text-center md:text-start md:flex md:justify-end md:items-center">
<a class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Sign up free
</a>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
</div>
<!-- End Announcement Banner -->
Full Width with Dismiss Button on Blue Background
<!-- Announcement Banner -->
<div id="ab-full-width-with-dismiss-button-on-blue-bg" class="hs-removing:-translate-y-full bg-blue-600">
<div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
<div class="flex">
<p class="text-white">
Preline UI Figma is live. <a class="decoration-2 underline font-medium hover:text-white/[.8] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="../figma.html">Learn more</a>
</p>
<div class="ps-3 ms-auto">
<button type="button" class="inline-flex rounded-lg p-1.5 text-white/[.8] hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-600 focus:ring-white" data-hs-remove-element="#ab-full-width-with-dismiss-button-on-blue-bg">
<span class="sr-only">Dismiss</span>
<svg class="flex-shrink-0 h-4 w-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>
<!-- End Announcement Banner -->
Center Aligned in Container Size with Background Elements
<!-- Announcement Banner -->
<div class="max-w-[85rem] 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">
<p class="me-2 inline-block text-white">
Preline UI Figma is live.
</p>
<a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border-2 border-white text-white hover:border-white/70 hover:text-white/70 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="../figma.html">
Learn more
<svg class="flex-shrink-0 w-4 h-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>
<!-- End Announcement Banner -->
Light Pilled Style Link
<!-- Announcement Banner -->
<a class="group inline-block bg-white/[.05] hover:bg-white/[.1] border border-white/[.05] p-1 ps-4 rounded-full shadow-md" href="../figma.html">
<p class="me-2 inline-block text-white text-sm">
Preline UI Figma is live.
</p>
<span class="group-hover:bg-white/[.1] py-1.5 px-2.5 inline-flex justify-center items-center gap-x-2 rounded-full bg-white/[.075] font-semibold text-white text-sm">
<svg class="flex-shrink-0 w-4 h-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>
</span>
</a>
<!-- End Announcement Banner -->
Links in Gradient Background
<!-- Announcement Banner -->
<div class="bg-gradient-to-r from-purple-600 to-blue-400">
<div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
<!-- Grid -->
<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-white">
Ready to get started?
</p>
<a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border-2 border-white text-white hover:border-white/70 hover:text-white/70 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Sign up
</a>
</div>
<!-- End Col -->
<div class="flex items-center">
<a class="py-2 px-3 inline-flex justify-center items-center gap-2 rounded-lg font-medium text-white hover:bg-white/[.1] focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition-all text-sm" href="#">
<svg class="flex-shrink-0 w-4 h-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-white/[.3] 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-white hover:bg-white/[.1] focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 transition-all text-sm" href="#">
Explore what's new
</a>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
</div>
<!-- End Announcement Banner -->
Full Width Center Aligned Link on Gray Background
<!-- Announcement Banner -->
<a class="group block bg-gray-100 hover:bg-gray-200 p-4 rounded-lg text-center transition-all duration-300 dark:bg-white/[.05] dark:hover:bg-white/[.075]" href="#">
<div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
<p class="me-2 inline-block text-sm text-gray-800 dark:text-gray-200">
Shop for everyone on your list with the Preline Guide.
</p>
<span class="group-hover:underline decoration-2 inline-flex justify-center items-center gap-x-2 font-semibold text-blue-600 text-sm dark:text-blue-500">
Shop now
<svg class="flex-shrink-0 w-4 h-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>
</span>
</div>
</a>
<!-- End Announcement Banner -->
Download Preline UI
Our code is available for you to download, inspect, and modify: