Basic notification on bottom right

<div class="absolute bottom-0 right-0 m-4 mb-6 flex rounded shadow-lg max-w-sm">
	<div class="p-8 flex items-start">
		<div class="pr-2 text-lg-2 text-affirm"><i class="fal fa-check-circle"></i></div>
		<div class="pl-2 pt-2 flex-grow text-gray-800 font-sans-medium">This is a basic notification with some example text</div>
	</div>
</div>

Dismissible notification

We can store the ID of a dismissible item in local storage to know whether it's been dismissed. In the examle below, you can trigger a notification and then dismiss it. Once dismissed, the notification cannot re-appear until you clear your local storage.

<div class="p-8">
	<button class="btn btn--primary js-show-dismissible" data-dismissible-target="dismissible-0001">Trigger Dismissible</button>
	<button class="btn btn--outline" onclick="window.localStorage.removeItem('dismissible-0001');">Clear from local storage</button>
</div>

<div class="absolute hidden bottom-0 right-0 m-4 mb-6 rounded shadow-lg max-w-sm js-dismissible" data-dismissible-id="dismissible-0001">
	<button class="absolute top-0 right-0 p-4 text-gray-500 js-dismissible-trigger"><i class="far fa-times"></i></button>
	<div class="p-8 flex">
		<div class="pr-2 text-brand-primary"><i class="far fa-lightbulb fa-2x"></i></div>
		<div class="pl-2 pt-2 flex-grow text-gray-800 font-sans-medium">This is a basic notification with some example text</div>
	</div>
</div>