Add task list demo application

examples/task-list/styles.css

@@ -0,0 +1,53 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  label {
+    @apply block text-sm font-medium leading-6;
+    &[for]:has(~ input[required]) {
+      @apply after:content-['*'] after:text-red-600;
+    }
+  }
+
+  input[type='text'],
+  input[type='email'],
+  input[type='password'] {
+    @apply text-sm sm:text-base block w-full rounded-md border-0 py-1.5 px-2.5 text-slate-900 shadow-sm ring-1 ring-inset ring-primary-700/20 placeholder:text-slate-400 sm:text-sm sm:leading-6 placeholder:text-primary-600;
+    @apply focus:ring-2 focus:ring-primary-600 focus:outline-none;
+    &:has(+ button[type='submit']) {
+      @apply block w-full rounded-r-none;
+    }
+  }
+
+  input[type='checkbox'] {
+    @apply h-4 w-4 rounded border-primary-500 accent-primary-600;
+  }
+
+  button {
+    @apply button;
+    input + & {
+      @apply rounded-l-none -ml-px;
+    }
+    &[type='submit'] {
+      @apply button-primary;
+    }
+  }
+}
+
+@layer components {
+  .button {
+    @apply relative inline-flex items-center justify-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset ring-primary-300 hover:bg-slate-50 whitespace-pre disabled:cursor-not-allowed text-sm sm:text-base;
+  }
+
+  .button-primary {
+    @apply bg-primary-600 text-white cursor-pointer ring-primary-700 transition duration-100 ease-in-out hover:bg-primary-700 active:bg-primary-800 disabled:bg-primary-600/50 disabled:hover:bg-primary-600/50 disabled:active:bg-primary-600/50 disabled:cursor-not-allowed disabled:ring-primary-700/20;
+  }
+
+  .button-destructive {
+    @apply bg-red-600 text-white cursor-pointer ring-red-700 transition duration-100 ease-in-out hover:bg-red-700 active:bg-red-800 disabled:bg-red-600/50 disabled:hover:bg-red-600/50 disabled:active:bg-red-600/50 disabled:cursor-not-allowed disabled:ring-red-700/20;
+    &.button-ghost {
+      @apply bg-transparent text-red-600 ring-red-600 hover:bg-red-600/10;
+    }
+  }
+}