Tailwind Alert Components (118)

Alert from Trizzle

Dark blue info alert banner with dismiss button

A horizontal notification banner with a blue background displaying an info icon, the message "This is an Info alert — check it out!", and a close (X) button on the right. It conveys a neutral informational status message across the full width of the container.

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-3">
  <div class="container px-4 mx-auto">
    <div class="p-4 bg-blue-800 rounded-lg">
      <div class="flex w-full h-full items-center justify-between">
        <div class="flex items-center pr-6">
          <span class="flex-shrink-0 self-start">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17317C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C21.9971 9.34874 20.9425 6.80691 19.0678 4.93219C17.1931 3.05746 14.6513 2.00295 12 2ZM12 20C10.4178 20 8.87104 19.5308 7.55544 18.6518C6.23985 17.7727 5.21447 16.5233 4.60897 15.0615C4.00347 13.5997 3.84504 11.9911 4.15372 10.4393C4.4624 8.88743 5.22433 7.46197 6.34315 6.34315C7.46197 5.22433 8.88743 4.4624 10.4393 4.15372C11.9911 3.84504 13.5997 4.00346 15.0615 4.60896C16.5233 5.21447 17.7727 6.23984 18.6518 7.55544C19.5308 8.87103 20 10.4177 20 12C19.9976 14.121 19.1539 16.1544 17.6542 17.6542C16.1544 19.1539 14.121 19.9976 12 20ZM12 11.5C11.7348 11.5 11.4804 11.6054 11.2929 11.7929C11.1054 11.9804 11 12.2348 11 12.5V15.5C11 15.7652 11.1054 16.0196 11.2929 16.2071C11.4804 16.3946 11.7348 16.5 12 16.5C12.2652 16.5 12.5196 16.3946 12.7071 16.2071C12.8946 16.0196 13 15.7652 13 15.5V12.5C13 12.2348 12.8946 11.9804 12.7071 11.7929C12.5196 11.6054 12.2652 11.5 12 11.5ZM12 7.5C11.7528 7.5 11.5111 7.57331 11.3055 7.71066C11.1 7.84801 10.9398 8.04324 10.8452 8.27165C10.7505 8.50005 10.7258 8.75139 10.774 8.99386C10.8223 9.23634 10.9413 9.45907 11.1161 9.63388C11.2909 9.8087 11.5137 9.92775 11.7561 9.97598C11.9986 10.0242 12.25 9.99946 12.4784 9.90485C12.7068 9.81024 12.902 9.65002 13.0393 9.44446C13.1767 9.2389 13.25 8.99723 13.25 8.75C13.25 8.41848 13.1183 8.10054 12.8839 7.86612C12.6495 7.6317 12.3315 7.5 12 7.5Z" fill="#1890FF"></path>
            </svg>
          </span>
          <span class="text-sm leading-5 text-blue-50 font-medium ml-3">This is an Info alert — check it out!</span>
        </div>
        <button x-on:click="modal = false" class="inline-block">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.17495 5.99999L10.7583 2.42499C10.9152 2.26807 11.0034 2.05524 11.0034 1.83333C11.0034 1.61141 10.9152 1.39858 10.7583 1.24166C10.6014 1.08474 10.3885 0.996582 10.1666 0.996582C9.9447 0.996582 9.73187 1.08474 9.57495 1.24166L5.99995 4.82499L2.42495 1.24166C2.26803 1.08474 2.0552 0.996582 1.83328 0.996582C1.61136 0.996582 1.39854 1.08474 1.24162 1.24166C1.0847 1.39858 0.996539 1.61141 0.996539 1.83333C0.996539 2.05524 1.0847 2.26807 1.24162 2.42499L4.82495 5.99999L1.24162 9.57499C1.16351 9.65246 1.10151 9.74463 1.05921 9.84618C1.0169 9.94773 0.995117 10.0566 0.995117 10.1667C0.995117 10.2767 1.0169 10.3856 1.05921 10.4871C1.10151 10.5887 1.16351 10.6809 1.24162 10.7583C1.31908 10.8364 1.41125 10.8984 1.5128 10.9407C1.61435 10.983 1.72327 11.0048 1.83328 11.0048C1.94329 11.0048 2.05221 10.983 2.15376 10.9407C2.25531 10.8984 2.34748 10.8364 2.42495 10.7583L5.99995 7.17499L9.57495 10.7583C9.65242 10.8364 9.74459 10.8984 9.84614 10.9407C9.94769 10.983 10.0566 11.0048 10.1666 11.0048C10.2766 11.0048 10.3855 10.983 10.4871 10.9407C10.5886 10.8984 10.6808 10.8364 10.7583 10.7583C10.8364 10.6809 10.8984 10.5887 10.9407 10.4871C10.983 10.3856 11.0048 10.2767 11.0048 10.1667C11.0048 10.0566 10.983 9.94773 10.9407 9.84618C10.8984 9.74463 10.8364 9.65246 10.7583 9.57499L7.17495 5.99999Z" fill="#D0F2FF"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Alert from Artemis Dashboard

Tailwind CSS

Artemis Dashboard

Orange Dismissible Notification Banner

A single-line notification banner with a light peach background, orange left accent border, short text message, and a close (X) icon on the right. It conveys a status or informational message and can be dismissed.

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-orange-50 border-l-4 border-orange-500 rounded-r-lg">
    <div class="flex items-center">
      <h3 class="text-orange-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-orange-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Alert from Flex

Tailwind CSS

Flex

Attention alert banner with warning icon and dismiss button

A full-width yellow-toned alert banner displaying a bold heading 'Attention alert example', supporting body text, a warning triangle icon, and a close (X) control at the right edge. It conveys a cautionary status message in a single horizontal row.

<section class="bg-coolGray-50 py-4">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-yellow-100 border border-yellow-200 rounded-md">
      <div class="flex flex-wrap justify-between -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1">
            <div class="w-auto p-1">
              <svg class="relative top-0.5" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 10.6667C7.86814 10.6667 7.73925 10.7058 7.62962 10.779C7.51999 10.8523 7.43454 10.9564 7.38408 11.0782C7.33362 11.2 7.32042 11.3341 7.34614 11.4634C7.37187 11.5927 7.43536 11.7115 7.52859 11.8047C7.62183 11.898 7.74062 11.9615 7.86994 11.9872C7.99926 12.0129 8.1333 11.9997 8.25512 11.9493C8.37694 11.8988 8.48106 11.8133 8.55431 11.7037C8.62757 11.5941 8.66667 11.4652 8.66667 11.3333C8.66667 11.1565 8.59643 10.987 8.4714 10.8619C8.34638 10.7369 8.17681 10.6667 8 10.6667ZM15.1133 11.6467L9.74667 2.31334C9.5732 2.00235 9.31986 1.74331 9.01279 1.56298C8.70573 1.38266 8.35609 1.28758 8 1.28758C7.6439 1.28758 7.29426 1.38266 6.9872 1.56298C6.68014 1.74331 6.42679 2.00235 6.25333 2.31334L0.919999 11.6467C0.740529 11.9493 0.644094 12.294 0.640428 12.6459C0.636763 12.9977 0.725997 13.3444 0.899123 13.6507C1.07225 13.9571 1.32314 14.2123 1.62645 14.3907C1.92977 14.5691 2.27479 14.6643 2.62667 14.6667H13.3733C13.728 14.6702 14.0773 14.5793 14.3853 14.4033C14.6933 14.2273 14.9489 13.9726 15.126 13.6652C15.3031 13.3579 15.3952 13.0089 15.393 12.6542C15.3908 12.2995 15.2943 11.9518 15.1133 11.6467ZM13.96 12.98C13.9016 13.084 13.8163 13.1704 13.7131 13.2302C13.6099 13.29 13.4926 13.321 13.3733 13.32H2.62667C2.50741 13.321 2.39006 13.29 2.28688 13.2302C2.18369 13.1704 2.09843 13.084 2.04 12.98C1.98149 12.8787 1.95068 12.7637 1.95068 12.6467C1.95068 12.5296 1.98149 12.4147 2.04 12.3133L7.37333 2.98C7.42928 2.8708 7.51427 2.77916 7.61896 2.71516C7.72365 2.65117 7.84397 2.61731 7.96667 2.61731C8.08936 2.61731 8.20968 2.65117 8.31437 2.71516C8.41906 2.77916 8.50405 2.8708 8.56 2.98L13.9267 12.3133C13.9928 12.4132 14.0308 12.5291 14.0367 12.6488C14.0425 12.7684 14.0161 12.8875 13.96 12.9933V12.98ZM8 5.33334C7.82319 5.33334 7.65362 5.40357 7.52859 5.5286C7.40357 5.65362 7.33333 5.82319 7.33333 6V8.66667C7.33333 8.84348 7.40357 9.01305 7.52859 9.13807C7.65362 9.2631 7.82319 9.33334 8 9.33334C8.17681 9.33334 8.34638 9.2631 8.4714 9.13807C8.59643 9.01305 8.66667 8.84348 8.66667 8.66667V6C8.66667 5.82319 8.59643 5.65362 8.4714 5.5286C8.34638 5.40357 8.17681 5.33334 8 5.33334Z" fill="#F59E0B"></path>
              </svg>
            </div>
            <div class="flex-1 p-1">
              <h3 class="mb-2 font-medium text-sm text-yellow-900">Attention alert example</h3>
              <p class="font-medium text-sm text-yellow-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus ultrices lectus, eget auctor est vulputate vel.</p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <a href="#">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.94001 8L13.14 3.80667C13.2655 3.68113 13.3361 3.51087 13.3361 3.33333C13.3361 3.1558 13.2655 2.98554 13.14 2.86C13.0145 2.73447 12.8442 2.66394 12.6667 2.66394C12.4891 2.66394 12.3189 2.73447 12.1933 2.86L8.00001 7.06L3.80668 2.86C3.68114 2.73447 3.51088 2.66394 3.33334 2.66394C3.15581 2.66394 2.98555 2.73447 2.86001 2.86C2.73447 2.98554 2.66395 3.1558 2.66395 3.33333C2.66395 3.51087 2.73447 3.68113 2.86001 3.80667L7.06001 8L2.86001 12.1933C2.79752 12.2553 2.74793 12.329 2.71408 12.4103C2.68024 12.4915 2.66281 12.5787 2.66281 12.6667C2.66281 12.7547 2.68024 12.8418 2.71408 12.9231C2.74793 13.0043 2.79752 13.078 2.86001 13.14C2.92199 13.2025 2.99572 13.2521 3.07696 13.2859C3.1582 13.3198 3.24534 13.3372 3.33334 13.3372C3.42135 13.3372 3.50849 13.3198 3.58973 13.2859C3.67097 13.2521 3.7447 13.2025 3.80668 13.14L8.00001 8.94L12.1933 13.14C12.2553 13.2025 12.3291 13.2521 12.4103 13.2859C12.4915 13.3198 12.5787 13.3372 12.6667 13.3372C12.7547 13.3372 12.8418 13.3198 12.9231 13.2859C13.0043 13.2521 13.078 13.2025 13.14 13.14C13.2025 13.078 13.2521 13.0043 13.2859 12.9231C13.3198 12.8418 13.3372 12.7547 13.3372 12.6667C13.3372 12.5787 13.3198 12.4915 13.2859 12.4103C13.2521 12.329 13.2025 12.2553 13.14 12.1933L8.94001 8Z" fill="#784D05"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Alert from Dashy

Tailwind CSS

Dashy

Announcement Banner with Info Icon and Dismiss Control

A single-line notification banner on a light background with an info icon, a gradient-colored promotional message about September office hours and WME updates, and a close button on the right. It conveys a status or announcement message in a contained card.

<section class="py-4 overflow-hidden" :class="{'hidden': !open }" x-data="{ open: true }">
  <div class="container px-4 mx-auto">
    <div class="p-6 bg-white border rounded-xl">
      <div class="flex flex-wrap -m-2">
        <div class="flex-1 p-2">
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <svg class="relative top-0.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 10H10.75C10.75 9.58579 10.4142 9.25 10 9.25V10ZM10 13.3333H9.25C9.25 13.7475 9.58579 14.0833 10 14.0833V13.3333ZM10.8333 14.0833C11.2475 14.0833 11.5833 13.7475 11.5833 13.3333C11.5833 12.9191 11.2475 12.5833 10.8333 12.5833V14.0833ZM9.16667 9.25C8.75245 9.25 8.41667 9.58579 8.41667 10C8.41667 10.4142 8.75245 10.75 9.16667 10.75V9.25ZM10 5.91667C9.58579 5.91667 9.25 6.25245 9.25 6.66667C9.25 7.08088 9.58579 7.41667 10 7.41667V5.91667ZM10.0083 7.41667C10.4225 7.41667 10.7583 7.08088 10.7583 6.66667C10.7583 6.25245 10.4225 5.91667 10.0083 5.91667V7.41667ZM9.25 10V13.3333H10.75V10H9.25ZM10 14.0833H10.8333V12.5833H10V14.0833ZM10 9.25H9.16667V10.75H10V9.25ZM16.75 10C16.75 13.7279 13.7279 16.75 10 16.75V18.25C14.5563 18.25 18.25 14.5563 18.25 10H16.75ZM10 16.75C6.27208 16.75 3.25 13.7279 3.25 10H1.75C1.75 14.5563 5.44365 18.25 10 18.25V16.75ZM3.25 10C3.25 6.27208 6.27208 3.25 10 3.25V1.75C5.44365 1.75 1.75 5.44365 1.75 10H3.25ZM10 3.25C13.7279 3.25 16.75 6.27208 16.75 10H18.25C18.25 5.44365 14.5563 1.75 10 1.75V3.25ZM10 7.41667H10.0083V5.91667H10V7.41667Z" fill="#B8C1CC"></path>
              </svg>
            </div>
            <div class="flex-1 p-1.5">
              <p class="font-medium">
                <span class="text-transparent bg-clip-text bg-gradient-purple-left">Register now for September office hours:</span>
                <span>WME updates and new features!</span>
              </p>
            </div>
          </div>
        </div>
        <div class="w-auto p-2">
          <button x-on:click="open = false" class="relative top-1 text-neutral-300 hover:text-neutral-400">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.46967 11.4697C3.17678 11.7626 3.17678 12.2374 3.46967 12.5303C3.76256 12.8232 4.23744 12.8232 4.53033 12.5303L3.46967 11.4697ZM12.5303 4.53033C12.8232 4.23744 12.8232 3.76256 12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L12.5303 4.53033ZM4.53033 3.46967C4.23744 3.17678 3.76256 3.17678 3.46967 3.46967C3.17678 3.76256 3.17678 4.23744 3.46967 4.53033L4.53033 3.46967ZM11.4697 12.5303C11.7626 12.8232 12.2374 12.8232 12.5303 12.5303C12.8232 12.2374 12.8232 11.7626 12.5303 11.4697L11.4697 12.5303ZM4.53033 12.5303L12.5303 4.53033L11.4697 3.46967L3.46967 11.4697L4.53033 12.5303ZM3.46967 4.53033L11.4697 12.5303L12.5303 11.4697L4.53033 3.46967L3.46967 4.53033Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

Alert from Vendia

Tailwind CSS

Vendia

Gradient announcement bar with dismiss button

A full-width horizontal announcement bar with a yellow-to-blue gradient background, centered message text, and a black pill-shaped Dismiss button on the right. It is used to inform visitors of a site-wide message and can be closed.

<section>
  <div class="py-4 bg-gradient-to-r from-yellow-500 via-green-300 to-blue-500">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-center">
        <p class="mr-5 font-medium">This announcement bar can be used to inform visitors of something important.</p>
        <a class="inline-block py-1 px-2 text-sm text-white hover:text-black bg-black hover:bg-white rounded-full transition duration-200" href="#">Dismiss</a>
      </div>
    </div>
  </div>
</section>

Alert from Consulty

Tailwind CSS

Consulty

Orange Announcement Bar with Underlined Link and Close Button

A full-width orange top banner displaying a short announcement message with an underlined inline link and a dismiss (close) icon on the right. The banner uses a subtle patterned background and sits above a plain light gray content area.

<div class="fixed top-0 left-0 z-30 w-full" :class="{'hidden': !open }" x-data="{ open: true }">
    <div class="w-full py-4 px-5 bg-orange-400 relative" style="background-image: url('consulty-assets/alerts/shapes-background1.png')">
        <p class="tracking-tight text-white text-sm font-medium text-center w-56 sm:w-auto mx-auto">
            <span>A quick announcement goes here.</span>
            <a href="#" class="underline">Add your quick alert here</a>
        </p>
        <div class="absolute right-5 top-1/2 transform -translate-y-1/2">
            <a href="#" x-on:click.prevent="open = false">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M4 12L12 4M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
    </div>
</div>

Alert from Sirius Dashboard

Tailwind CSS

Sirius Dashboard

Cookie Consent Banner with Manage and Accept Buttons

A full-width blue notification banner that informs visitors about functional and analytical cookie usage, with a privacy policy link, a dismiss close icon, and two action buttons for managing preferences or accepting cookies.

<section x-data="{ open: true }" :class="{'hidden': !open}">
    <div class="bg-blue-500 py-10 px-10 lg:px-20">
        <div class="container mx-auto px-4">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
                <p class="text-white text-sm font-semibold">Cooookies! 🍪</p>
                <button x-on:click="open=false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <g clip-path="url(#clip0_708_3760)">
                          <path d="M15.625 4.375L4.375 15.625" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          <path d="M15.625 15.625L4.375 4.375" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                        <defs>
                          <clipPath id="clip0_708_3760">
                            <rect width="20" height="20" fill="white"></rect>
                          </clipPath>
                        </defs>
                    </svg>
                </button>
            </div>
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-7/12 p-4">
                    <p class="text-white text-sm max-w-2xl">This site uses functional and analytical cookies to offer you an optimal visitor experience. This also enables us to record and analyze visitor behaviour and thereby improve our site and display relevant advertisements. By clicking on accpet you agree with this.</p>
                    <a href="#" class="text-white text-sm underline">Read more about our privacy policy.</a>
                </div>
                <div class="w-full lg:w-5/12 p-4">
                    <div class="flex flex-wrap gap-3 lg:justify-end lg:pr-12">
                        <a href="#" class="inline-flex items-center justify-center w-full sm:w-auto px-6 py-2 rounded-2xl text-white text-sm font-medium border border-white border-opacity-20 shadow-sm bg-white bg-opacity-10 hover:bg-opacity-20 focus:ring focus:ring-white focus:ring-opacity-30 transition duration-200">
                            <span class="mr-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <g clip-path="url(#clip0_708_3423)">
                                      <path d="M6.375 8.06219L1.875 8.06221" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                      <path d="M10.125 8.06221L7.875 8.06219" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                      <path d="M3.375 3.93724L1.875 3.93716" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                      <path d="M10.125 3.93716L4.875 3.93724" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                      <path d="M4.875 2.81219V5.0622" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                      <path d="M7.875 9.18719V6.93719" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_708_3423">
                                        <rect width="12" height="12" fill="white"></rect>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </span>
                            <span>Manage cookies</span>
                        </a>
                        <a href="#" class="inline-flex items-center justify-center w-full sm:w-auto px-6 py-2 rounded-2xl text-white text-sm font-medium shadow-sm bg-red-500 hover:bg-red-600 focus:ring focus:ring-red-400 transition duration-200">
                            <span class="mr-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                                    <g clip-path="url(#clip0_708_3354)">
                                      <path d="M10.125 3.37524L4.875 8.62501L2.25 6.00024" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_708_3354">
                                        <rect width="12" height="12" fill="white"></rect>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </span>
                            <span>Accept cookies</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Alerts are used to draw users' attention to a specific event. Therefore, they must properly stand out from the normal layout of the site. Tailwind component alerts serve exactly this purpose, standing out with the chosen theme.

Browse and choose one variant from Tailwind components alerts. They are UI library components created by our talented designers and coded by our development team.

Buy a subscription to get access to the drag and drop editor, all UI libraries and code under each component.

Try demo for free - no registration needed.

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Tailwind CSS Alert Components

Framework

UI Library

Components

Alert from Trizzle

Dark blue info alert banner with dismiss button

Alert from Artemis Dashboard

Orange Dismissible Notification Banner

Alert from Flex

Attention alert banner with warning icon and dismiss button

Your next website starts here

Alert from Dashy

Announcement Banner with Info Icon and Dismiss Control

Alert from Vendia

Gradient announcement bar with dismiss button

Alert from Consulty

Orange Announcement Bar with Underlined Link and Close Button

Alert from Sirius Dashboard

Cookie Consent Banner with Manage and Accept Buttons

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

Extensions

UI Components

Company

Support

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Alert Components

Framework

UI Library

Components

Alert from Trizzle

Dark blue info alert banner with dismiss button

Alert from Artemis Dashboard

Orange Dismissible Notification Banner

Alert from Flex

Attention alert banner with warning icon and dismiss button

Your next website starts here

Alert from Dashy

Announcement Banner with Info Icon and Dismiss Control

Alert from Vendia

Gradient announcement bar with dismiss button

Alert from Consulty

Orange Announcement Bar with Underlined Link and Close Button

Alert from Sirius Dashboard

Cookie Consent Banner with Manage and Accept Buttons

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support