Alert

Primary Alert

Primary

This is a primary alert message.

<div class="rounded-lg border p-4 text-sm bg-primary text-primary-foreground bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Primary</h5><div class="text-sm opacity-90">This is a primary alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-primary text-primary-foreground bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Primary</h5><div className="text-sm opacity-90">This is a primary alert message.</div></div>

Secondary Alert

Secondary

This is a secondary alert message.

<div class="rounded-lg border p-4 text-sm bg-muted text-muted-foreground bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Secondary</h5><div class="text-sm opacity-90">This is a secondary alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-muted text-muted-foreground bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Secondary</h5><div className="text-sm opacity-90">This is a secondary alert message.</div></div>

Destructive Alert

Destructive

This is a destructive alert message.

<div class="rounded-lg border p-4 text-sm bg-red-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Destructive</h5><div class="text-sm opacity-90">This is a destructive alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-red-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Destructive</h5><div className="text-sm opacity-90">This is a destructive alert message.</div></div>

Success Alert

Success

This is a success alert message.

<div class="rounded-lg border p-4 text-sm bg-green-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Success</h5><div class="text-sm opacity-90">This is a success alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-green-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Success</h5><div className="text-sm opacity-90">This is a success alert message.</div></div>

Warning Alert

Warning

This is a warning alert message.

<div class="rounded-lg border p-4 text-sm bg-yellow-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Warning</h5><div class="text-sm opacity-90">This is a warning alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-yellow-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Warning</h5><div className="text-sm opacity-90">This is a warning alert message.</div></div>

Info Alert

Info

This is a info alert message.

<div class="rounded-lg border p-4 text-sm bg-blue-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Info</h5><div class="text-sm opacity-90">This is a info alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-blue-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Info</h5><div className="text-sm opacity-90">This is a info alert message.</div></div>

Purple Alert

Purple

This is a purple alert message.

<div class="rounded-lg border p-4 text-sm bg-purple-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Purple</h5><div class="text-sm opacity-90">This is a purple alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-purple-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Purple</h5><div className="text-sm opacity-90">This is a purple alert message.</div></div>

Orange Alert

Orange

This is a orange alert message.

<div class="rounded-lg border p-4 text-sm bg-orange-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Orange</h5><div class="text-sm opacity-90">This is a orange alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-orange-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Orange</h5><div className="text-sm opacity-90">This is a orange alert message.</div></div>

Pink Alert

Pink

This is a pink alert message.

<div class="rounded-lg border p-4 text-sm bg-pink-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Pink</h5><div class="text-sm opacity-90">This is a pink alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-pink-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Pink</h5><div className="text-sm opacity-90">This is a pink alert message.</div></div>

Teal Alert

Teal

This is a teal alert message.

<div class="rounded-lg border p-4 text-sm bg-teal-500 text-white bg-opacity-10 text-opacity-90"><h5 class="mb-1 font-medium leading-none tracking-tight">Teal</h5><div class="text-sm opacity-90">This is a teal alert message.</div></div>

<div className="rounded-lg border p-4 text-sm bg-teal-500 text-white bg-opacity-10 text-opacity-90"><h5 className="mb-1 font-medium leading-none tracking-tight">Teal</h5><div className="text-sm opacity-90">This is a teal alert message.</div></div>