Semantic Toast Notifications Using Tailwind UI
Semantic toast notification created with Tailwind CSS is a small and descriptive notification component designed using semantic classes and the flexibility of Tailwind CSS to provide concise messages or notifications to users. I was inspired by a design that Pennylan made from Dribble.
toast
Loading component...
523 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="container items-center px-4 py-8 m-auto mt-5">
<div class="flex flex-wrap w-full md:max-w-7xl lg:max-w-5xl mx-auto">
<!-- toast success start -->
<div class="w-full p-2 md:w-1/2 space-y-2">
<div>
<span
class="bg-green-100 text-green-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Success</span>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-green-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-green-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-green-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Succesfully added something</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">There is something
that was added succesfully.
</p>
<div class="flex flex-row mt-2 justify-end">
<button
class="py-1 px-4 font-medium text-sm text-green-800 transition-colors duration-300 transform rounded-md hover:text-green-600">
Igrone
</button>
<button
class="py-1 px-4 text-sm font-medium text-green-800 transition-colors duration-300 transform border border-green-800 rounded-lg hover:border-green-900 hover:bg-green-600 hover:text-white">
Show me
</button>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-green-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-green-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-green-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-green-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Succesfully added something</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">There is something
that was added succesfully.</p>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-green-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-green-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-green-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-green-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Operation succesfull</h1>
</div>
<button class="flex mb-3 items-center text-sm font-medium text-green-800 hover:text-green-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="h-3.5 w-3.5 mr-1 text-green-800 hover:text-green-900">
<path
d="M8 7V11L2 6L8 1V5H13C17.4183 5 21 8.58172 21 13C21 17.4183 17.4183 21 13 21H4V19H13C16.3137 19 19 16.3137 19 13C19 9.68629 16.3137 7 13 7H8Z">
</path>
</svg>
Undo
</button>
</div>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-green-300 rounded-bl-md"></div>
</div>
</div>
</div>
<!-- toast success end -->
<!-- toast info start -->
<div class="w-full p-2 md:w-1/2 space-y-2">
<div>
<span
class="bg-blue-100 text-blue-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Info</span>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-blue-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-blue-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-blue-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something happened</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">Somewhere,
something happened.
</p>
<div class="flex flex-row mt-2 justify-end">
<button
class="py-1 px-4 font-medium text-sm text-blue-800 transition-colors duration-300 transform rounded-md hover:text-blue-600">
Igrone
</button>
<button
class="py-1 px-4 text-sm font-medium text-blue-800 transition-colors duration-300 transform border border-blue-800 rounded-lg hover:border-blue-900 hover:bg-blue-600 hover:text-white">
Show me
</button>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-blue-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-blue-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-blue-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-blue-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something happened</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">Somewhere,
something happened.</p>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-blue-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-blue-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-blue-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-blue-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something happened</h1>
</div>
<button class="flex mb-3 items-center text-sm font-medium text-blue-800 hover:text-blue-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="h-3.5 w-3.5 mr-1 text-blue-800 hover:text-blue-900">
<path
d="M8 7V11L2 6L8 1V5H13C17.4183 5 21 8.58172 21 13C21 17.4183 17.4183 21 13 21H4V19H13C16.3137 19 19 16.3137 19 13C19 9.68629 16.3137 7 13 7H8Z">
</path>
</svg>
Undo
</button>
</div>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-blue-300 rounded-bl-md"></div>
</div>
</div>
</div>
<!-- toast info end -->
<!-- toast warning start -->
<div class="w-full p-2 md:w-1/2 space-y-2">
<div>
<span
class="bg-yellow-100 text-yellow-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">Warning</span>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-yellow-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-yellow-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-yellow-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something went wrong</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">There is something
then went wrong.
</p>
<div class="flex flex-row mt-2 justify-end">
<button
class="py-1 px-4 font-medium text-sm text-yellow-800 transition-colors duration-300 transform rounded-md hover:text-yellow-600">
Igrone
</button>
<button
class="py-1 px-4 text-sm font-medium text-yellow-800 transition-colors duration-300 transform border border-yellow-800 rounded-lg hover:border-yellow-900 hover:bg-yellow-600 hover:text-white">
Show me
</button>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-yellow-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-yellow-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-yellow-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-yellow-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something went wrong</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">There is something
then went wrong.</p>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-yellow-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-yellow-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-yellow-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-yellow-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something went wrong</h1>
</div>
<button class="flex mb-3 items-center text-sm font-medium text-yellow-800 hover:text-yellow-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="h-3.5 w-3.5 mr-1 text-yellow-800 hover:text-yellow-900">
<path
d="M8 7V11L2 6L8 1V5H13C17.4183 5 21 8.58172 21 13C21 17.4183 17.4183 21 13 21H4V19H13C16.3137 19 19 16.3137 19 13C19 9.68629 16.3137 7 13 7H8Z">
</path>
</svg>
Undo
</button>
</div>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-yellow-300 rounded-bl-md"></div>
</div>
</div>
</div>
<!-- toast warning end -->
<!-- toast danger start -->
<div class="w-full p-2 md:w-1/2 space-y-2">
<div>
<span
class="bg-red-100 text-red-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Danger</span>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-red-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-red-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-red-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something went wrong</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">Something has not
gone as it should.
</p>
<div class="flex flex-row mt-2 justify-end">
<button
class="py-1 px-4 font-medium text-sm text-red-800 transition-colors duration-300 transform rounded-md hover:text-red-600">
Igrone
</button>
<button
class="py-1 px-4 text-sm font-medium text-red-800 transition-colors duration-300 transform border border-red-800 rounded-lg hover:border-red-900 hover:bg-red-600 hover:text-white">
Show me
</button>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-red-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-red-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-red-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-red-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something went wrong</h1>
</div>
<button class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 cursor-pointer text-gray-500 hover:text-gray-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<p class="text-xs lg:text-sm font-medium text-gray-500 pr-2 sm:pr-0 dark:text-gray-300">Something has not
gone as it should.</p>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-red-300 rounded-bl-md"></div>
</div>
</div>
<div class="relative">
<div
class="flex flex-row items-center rounded-md shadow-lg overflow-hidden w-full sm:w-11/12 md:max-w-2xl bg-white border-b-8 border-red-100">
<div class="m-4 flex-col w-full">
<div class="flex flex-row items-center justify-between">
<div class="flex w-full justify-between">
<div class="flex flex-row mb-2">
<span
class="inline-flex items-center justify-center w-6 h-6 mr-2 text-sm font-semibold text-gray-800 bg-red-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5 text-red-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5" />
</svg>
</span>
<h1 class="font-semibold text-gray-800 text-sm lg:text-base">Something went wrong</h1>
</div>
<button class="flex mb-3 items-center text-sm font-medium text-red-800 hover:text-red-900">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="h-3.5 w-3.5 mr-1 text-red-800 hover:text-red-900">
<path
d="M8 7V11L2 6L8 1V5H13C17.4183 5 21 8.58172 21 13C21 17.4183 17.4183 21 13 21H4V19H13C16.3137 19 19 16.3137 19 13C19 9.68629 16.3137 7 13 7H8Z">
</path>
</svg>
Undo
</button>
</div>
</div>
</div>
</div>
<div class="absolute left-0 bottom-0 w-1/4">
<div class="h-2 bg-red-300 rounded-bl-md"></div>
</div>
</div>
</div>
<!-- toast danger end -->
</div>
</div>