Recreate blazor error ui in tailwind

src/NSeguin.Dev.Web/Components/Layout/SimpleLayout.razor

@@ -21,8 +21,11 @@
     </div>
 </main>
 
-<div id="blazor-error-ui">
+<div id="blazor-error-ui"
+     class="bg-yellow-400 bottom-0 shadow-md fixed left-0 py-2 px-4 w-full z-50 hidden"
+     role="alertdialog"
+     tabindex="-1">
     An unhandled error has occurred.
-    <a href="" class="reload">Reload</a>
-    <a class="dismiss">🗙</a>
+    <a href="" class="reload underline">Reload</a>
+    <button class="dismiss" type="button">🗙</button>
 </div>

src/NSeguin.Dev.Web/Components/Layout/SimpleLayout.razor.css

@@ -1,18 +0,0 @@
-#blazor-error-ui {
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
-}
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: 0.75rem;
-    top: 0.5rem;
-}

src/NSeguin.Dev.Web/Components/Pages/Home.razor

@@ -21,6 +21,11 @@
     Thanks for visiting!
 </p>
 
+<p class="mt-4 text-base leading-7 text-slate-900">
+    Click this button to throw an error:
+    <button class="px-4 py-2 bg-brand text-white rounded-md" @onclick="ThrowError">Throw Error</button>
+</p>
+
 <div class="flex">
     <div class="w-full sm:w-auto">
         <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
@@ -66,4 +71,11 @@
             </a>
         </div>
     </div>
-</div>
+</div>
+
+@code {
+    private void ThrowError()
+    {
+        throw new Exception("This is a test exception");
+    }
+}