moving HTML elements from components directory

src/resources/css/elements/buttons.css

@@ -0,0 +1,23 @@
+.button {
+    @apply inline-grid grid-flow-col auto-cols-max gap-x-2 items-center;
+}
+
+.button-primary {
+    @apply border-blue-300 bg-gradient-to-br from-blue-400 to-blue-700;
+}
+
+.button-secondary {
+    @apply border-indigo-300 bg-gradient-to-br from-indigo-400 to-indigo-700;
+}
+
+.button-tertiary {
+    @apply border-blue-300 bg-gradient-to-br from-green-400 to-blue-500;
+}
+
+.button-success {
+    @apply border-green-300 bg-gradient-to-br from-green-400 to-green-700;
+}
+
+.button-danger {
+    @apply border-red-300 bg-gradient-to-br from-red-400 to-red-700;
+}

src/resources/css/elements/forms.css

@@ -0,0 +1,31 @@
+.form-block {
+    @apply grid auto-rows-max gap-y-1;
+}
+
+.form-label {
+    @apply uppercase font-semibold text-xs text-zinc-600 dark:text-zinc-300;
+}
+
+input.form-input[type="date"],
+input.form-input[type="datetime-local"],
+input.form-input[type="email"],
+input.form-input[type="month"],
+input.form-input[type="number"],
+input.form-input[type="password"],
+input.form-input[type="search"],
+input.form-input[type="tel"],
+input.form-input[type="text"],
+input.form-input[type="textarea"],
+input.form-input[type="url"],
+input.form-input[type="week"],
+textarea.form-input {
+    @apply relative px-3 py-1 border rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 bg-white dark:bg-indigo-900 text-zinc-900 dark:text-zinc-100 border-stone-300 dark:border-stone-600 shadow dark:shadow-white;
+}
+
+.form-checkbox-label {
+    @apply grid grid-flow-col auto-cols-max gap-x-2 items-center;
+}
+
+.form-checkbox-label .form-checkbox {
+    /*rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50*/
+}

src/resources/css/elements/tables.css

@@ -0,0 +1,32 @@
+.table {
+    @apply bg-white dark:bg-neutral-800 rounded w-full;
+}
+
+.table thead th,
+.table tbody td {
+    @apply px-4 py-3;
+}
+
+.table thead tr {
+    @apply border-b border-neutral-900 dark:border-neutral-300;
+}
+
+.table thead th {
+    @apply text-zinc-700 dark:text-zinc-200 text-sm text-left font-semibold uppercase;
+}
+
+.table tbody tr:not(:first-child) {
+    @apply border-t border-neutral-700 dark:border-neutral-400;
+}
+
+.table tbody td {}
+
+.table-fuzzy-hover tbody:hover td {
+    color: transparent;
+    text-shadow: 0 0 2px #999;
+}
+
+.table-fuzzy-hover tbody:hover tr:hover td {
+    color: #444;
+    text-shadow: 0 1px 0 #fff;
+}