feat(kbd): kbd component

components/components.css

@@ -21,6 +21,7 @@
 @import "./informational/pagination.css";
 @import "./informational/skeleton.css";
 @import "./informational/stepper.css";
+@import "./informational/kbd.css";
 @import "./navigation/navbar.css";
 @import "./navigation/breadcrumb.css";
 @import "./navigation/drawer.css";

components/informational/kbd.css

@@ -0,0 +1,23 @@
+.kbd {
+  @apply inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md border  border-gray-500 bg-gray-200 py-1.5 px-2.5 text-xs font-semibold shadow-[0px_1.5px_0px_rgba(0,0,0,0.1)];
+}
+
+.kbd-xs {
+  @apply py-0.5 px-1.5 text-xs;
+}
+
+.kbd-sm {
+  @apply py-1 px-2 text-xs;
+}
+
+.kbd-md {
+  @apply py-1.5 px-2.5 text-xs;
+}
+
+.kbd-lg {
+  @apply py-2 px-3 text-sm;
+}
+
+.kbd-xl {
+  @apply py-2 px-3.5 text-base;
+}