Most simple components created

src/index.css

@@ -0,0 +1,82 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+	--color-neutral-825: oklch(0.253 0 0);
+	--color-neutral-850: oklch(0.237 0 0);
+
+
+	--light-text-color: #213547;
+	--light-bg-color: #FFFFFF;
+
+	--dark-text-color: #FFFFFFDE;
+	--dark-bg-color: #242424;
+}
+
+
+:root.light {
+	--text-color: var(--light-text-color);
+	--bg-color: var(--light-bg-color);
+}
+
+:root.dark {
+	--text-color: var(--dark-text-color);
+	--bg-color: var(--dark-bg-color);
+}
+
+input::-webkit-calendar-picker-indicator {
+	cursor: pointer;
+}
+
+:root {
+	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	color: var(--text-color);
+	background-color: var(--bg-color);
+}
+
+#root {
+	padding-top: 4rem;
+	padding-inline: 1rem;
+	height: 100%;
+	width: 100%;
+}
+
+body {
+	margin-inline: auto;
+
+	min-width: 320px;
+	height: 100vh;
+
+	text-align: center;
+}
+
+a.active {
+	color: var(--color-blue-400);
+}
+
+nav {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-btween;
+	align-items: center;
+	margin-inline: auto;
+	padding-inline: 1rem;
+}
+
+@keyframes spinnerAnimate {
+	100% {
+		transform: rotate(360deg);
+	}
+}