Alerts
Basic Alert
Primary alert! You should check in on some of those
fields below.
Secondary alert! You should check in on some of those
fields below.
Info alert! You should check in on some of those
fields below.
Success alert! You should check in on some of those
fields below.
Danger alert! You should check in on some of those
fields below.
Warning alert! You should check in on some of those
fields below.
Dark alert! You should check in on some of those
fields below.
<div class="bg-gray-800 text-sm text-white rounded-md p-4 dark:bg-white dark:text-gray-800" role="alert">
<span class="font-bold">Dark</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-gray-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-primary text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-green-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-red-500 text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-primary text-sm text-white rounded-md p-4" role="alert">
<span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
</div>
Soft color variants Alert
Primary alert! You should check in on some of those
fields below.
Secondary alert! You should check in on some of those
fields below.
Info alert! You should check in on some of those
fields below.
Success alert! You should check in on some of those
fields below.
Danger alert! You should check in on some of those
fields below.
Warning alert! You should check in on some of those
fields below.
Dark alert! You should check in on some of those
fields below.
<div class="bg-primary/25 text-primary text-sm rounded-md p-4" role="alert">
<span class="font-bold">Primary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-secondary/25 text-secondary text-sm rounded-md p-4" role="alert">
<span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-info/25 text-info text-sm rounded-md p-4" role="alert">
<span class="font-bold">Info</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-success/25 text-success text-sm rounded-md p-4" role="alert">
<span class="font-bold">Success</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-danger/25 text-danger text-sm rounded-md p-4" role="alert">
<span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-warning/25 text-warning text-sm rounded-md p-4" role="alert">
<span class="font-bold">Warning</span> alert! You should check in on some of those fields below.
</div>
<div class="bg-dark/25 text-slate-900 dark:text-slate-200 text-sm rounded-md p-4" role="alert">
<span class="font-bold">Dark</span> alert! You should check in on some of those fields below.
</div>
With description Alert
Cannot connect to the database
We are unable to save any progress at this time.
<div class="bg-yellow-50 border border-yellow-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<i class="mgc_information_line text-xl"></i>
</div>
<div class="ms-4">
<h3 class="text-sm text-yellow-800 font-semibold">
Cannot connect to the database
</h3>
<div class="mt-1 text-sm text-yellow-700">
We are unable to save any progress at this time.
</div>
</div>
</div>
</div>
Actions
YouTube would like you to send notifications
Notifications may include alerts, sounds and icon badges. These can be
configured in Settings.
<div class="bg-sky-50 border border-sky-200 rounded-md p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<i class="mgc_information_line text-xl"></i>
</div>
<div class="ms-4">
<h3 class="text-gray-800 font-semibold">
YouTube would like you to send notifications
</h3>
<div class="mt-2 text-sm text-gray-600">
Notifications may include alerts, sounds and icon badges. These can be configured in Settings.
</div>
<div class="mt-4">
<div class="flex space-x-3">
<button type="button" class="inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-medium text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all text-sm">
Don't allow
</button>
<button type="button" class="inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-medium text-primary hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-all text-sm">
Allow
</button>
</div>
</div>
</div>
</div>
</div>
Link on right
A new software update is available. See what's new in version 3.0.7
<div class="flex">
<div class="flex-shrink-0">
<i class="mgc_information_line text-xl"></i>
</div>
<div class="flex-1 md:flex md:justify-between ms-4">
<p class="text-sm text-gray-700">
A new software update is available. See what's new in version 3.0.7
</p>
<p class="text-sm mt-3 md:mt-0 md:ms-6">
<a class="text-gray-700 hover:text-gray-500 font-medium whitespace-nowrap" href="#">Details</a>
</p>
</div>
</div>
Dismiss button
File has been successfully uploaded.
<div id="dismiss-alert" class="transition duration-300 bg-teal-50 border border-teal-200 rounded-md p-4" role="alert">
<div class="flex items-center gap-3">
<div class="flex-shrink-0">
<i class="mgc_-badge-check text-xl"></i>
</div>
<div class="flex-grow">
<div class="text-sm text-teal-800 font-medium">
File has been successfully uploaded.
</div>
</div>
<button data-fc-dismiss="dismiss-alert" type="button" id="dismiss-test" class="ms-auto h-8 w-8 rounded-full bg-gray-200 flex justify-center items-center">
<i class="mgc_close_line text-xl"></i>
</button>
</div>
</div>