Alert
An alert element that is used to draw attention.
Tailwind Only
Copied!
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
<div class="relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-neutral-900">
<svg class="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"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-70">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
Data
Below you will find the data properties available in the x-data attribute of this element.
This particular element does not contain any data, It holds within it only TailwindCSS classes. Ah, but fear not! Should you so desire, you have the power to infuse it with some dynamic magic. Simply add the `x-data` attribute and create your desired functionality.
More Examples
Below you will find more Alert examples you may wish to use in your projects.
Copied!
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
<div class="relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
Copied!
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
Alert Message Headline
This is the subtext for your alert message, providing important information or instructions.
<div class="relative w-full rounded-lg border border-transparent bg-blue-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-blue-600">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-red-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-red-600">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-green-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-green-600">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-yellow-50 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-yellow-600">
<svg class="w-5 h-5 -translate-y-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
<h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
<div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
