add modal component

src/base/components/modal.css

@@ -0,0 +1,10 @@
+.modal{
+  @apply inset-0 invisible opacity-0 pointer-events-none fixed grid place-items-end sm:place-items-center;
+  z-index: 999;
+}
+.modal:target {
+  @apply visible opacity-100 pointer-events-auto;
+}
+.modal-action{
+  @apply flex;
+}

src/base/index.css

@@ -19,3 +19,4 @@
 @import "./components/textarea";
 @import "./components/drawer";
 @import "./components/tab";
+@import "./components/modal";

src/styled/components/modal.css

@@ -0,0 +1,13 @@
+.modal{
+  @apply transition duration-200 ease-in-out;
+  background-color: hsl(0deg 0% 0% / 40%);
+}
+.modal-box{
+  @apply transform translate-y-10 sm:translate-y-0 sm:scale-90 transition duration-200 ease-in-out rounded-t-box sm:rounded-b-box bg-default sm:max-w-lg p-6 shadow-2xl w-full;
+}
+.modal:target .modal-box{
+  @apply translate-y-0 scale-100;
+}
+.modal-action{
+  @apply mt-6 justify-end space-x-2;
+}

src/styled/index.css

@@ -23,3 +23,4 @@
 @import "./components/tab";
 @import "../utility/glass";
 
+@import "./components/modal";