<div class="flex justify-center p-6">
<div class="flex w-screen max-w-sm rounded-md bg-white p-4 shadow-sm shadow-gray-950/10 ring-1 ring-gray-900/10">
<div>
<!-- Heroicons name: mini/calendar -->
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3 flex-1">
<div class="text-sm font-medium text-gray-900">The due date has been set to Oct 12</div>
<div class="text-xs text-gray-500">16 days remaining</div>
</div>
<div class="ml-3">
<button class="-mr-2 -mt-2 block p-0.5">
<!-- Heroicons name: mini/x-mark -->
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
</div>
</div>
<div class="flex justify-center p-6">
<div class="space-y-4">
<!-- Success -->
<div
class="relative flex w-screen max-w-sm overflow-hidden rounded-md bg-white px-4 py-3 shadow-sm shadow-gray-950/10 ring-1 ring-gray-900/10 before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-green-500"
>
<div class="flex items-center">
<!-- Heroicons name: mini/check-circle -->
<svg class="size-6 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3 flex-1">
<div class="text-sm font-medium text-gray-900">Well done</div>
<div class="text-xs text-gray-500">Your application was successfully sent.</div>
</div>
<div class="ml-3 flex items-center">
<button class="block p-0.5">
<!-- Heroicons name: mini/x-mark -->
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
</div>
<!-- Error -->
<div
class="relative flex w-screen max-w-sm overflow-hidden rounded-md bg-white px-4 py-3 shadow-sm shadow-gray-950/10 ring-1 ring-gray-900/10 before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-red-500"
>
<div class="flex items-center">
<!-- Heroicons name: mini/x-circle -->
<svg class="size-6 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3 flex-1">
<div class="text-sm font-medium text-gray-900">Something went wrong</div>
<div class="text-xs text-gray-500">Change a few things up and try submitting again.</div>
</div>
<div class="ml-3 flex items-center">
<button class="block p-0.5">
<!-- Heroicons name: mini/x-mark -->
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
</div>
<!-- Warning -->
<div
class="relative flex w-screen max-w-sm overflow-hidden rounded-md bg-white px-4 py-3 shadow-sm shadow-gray-950/10 ring-1 ring-gray-900/10 before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-orange-500"
>
<div class="flex items-center">
<!-- Heroicons name: mini/exclamation-triangle -->
<svg class="size-6 text-orange-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3 flex-1">
<div class="text-sm font-medium text-gray-900">Heads up</div>
<div class="text-xs text-gray-500">You've reached your free article limit. Please upgrade to premium.</div>
</div>
<div class="ml-3 flex items-center">
<button class="block p-0.5">
<!-- Heroicons name: mini/x-mark -->
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
</div>
<!-- Info -->
<div
class="relative flex w-screen max-w-sm overflow-hidden rounded-md bg-white px-4 py-3 shadow-sm shadow-gray-950/10 ring-1 ring-gray-900/10 before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-sky-500"
>
<div class="flex items-center">
<!-- Heroicons name: mini/information-circle -->
<svg class="size-6 text-sky-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M19 10.5a8.5 8.5 0 11-17 0 8.5 8.5 0 0117 0zM8.25 9.75A.75.75 0 019 9h.253a1.75 1.75 0 011.709 2.13l-.46 2.066a.25.25 0 00.245.304H11a.75.75 0 010 1.5h-.253a1.75 1.75 0 01-1.709-2.13l.46-2.066a.25.25 0 00-.245-.304H9a.75.75 0 01-.75-.75zM10 7a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3 flex-1">
<div class="text-sm font-medium text-gray-900">Did you know?</div>
<div class="text-xs text-gray-500">246 new books were added today.</div>
</div>
<div class="ml-3 flex items-center">
<button class="block p-0.5">
<!-- Heroicons name: mini/x-mark -->
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
/>
</svg>
</button>
</div>
</div>
</div>
</div>