feat: basic setup for web with tailwind and routing

web/src/components/ui/button.tsx

@@ -0,0 +1,19 @@
+import type { ButtonHTMLAttributes, FC, ReactNode } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Button: FC<ButtonProps> = ({ children, className, ...props }) => {
+  return (
+    <button
+      className={`bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors ${
+        className || ""
+      }`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

web/src/components/ui/card.tsx

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from "react";
+
+interface ComponentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Card: FC<ComponentProps> = ({ children, className }) => {
+  return (
+    <div className={`bg-white rounded-lg shadow-md ${className || ""}`}>
+      {children}
+    </div>
+  );
+};
+
+export function CardContent({ children, className }: ComponentProps) {
+  return <div className={`p-4 ${className || ""}`}>{children}</div>;
+}

web/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import type { FC } from "react";
+
+interface InputProps {
+  id: string;
+  type: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export const Input: FC<InputProps> = ({ id, type, placeholder, className }) => {
+  return (
+    <input
+      id={id}
+      type={type}
+      placeholder={placeholder}
+      className={`w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+        className || ""
+      }`}
+    />
+  );
+};