upd

src/app.css

@@ -15,6 +15,20 @@
 		@apply underline text-sky-300 hover:text-sky-500 transition decoration-wavy underline-offset-4;
 	}
 
+	input {
+		@apply px-2 py-1 border border-slate-300 rounded-sm outline-none;
+
+	}
+
+	input[type="text"] {
+		@apply placeholder:italic disabled:bg-slate-100;
+	}
+
+
+	input[type="checkbox"] {
+		@apply p-2 checked:bg-pink-300 checked:border;
+	}
+
 	.btn {
 		@apply px-4 py-3 rounded-lg hover:transition hover:duration-300 hover:opacity-80 disabled:bg-slate-400/30 hover:disabled:opacity-100;
 

src/routes/+page.svelte

@@ -26,6 +26,16 @@
 		<div>
 			<input type="text" />
 		</div>
+		<div>
+			<input
+				disabled
+				type="text"
+				placeholder="E-mail"
+			/>
+		</div>
+		<div>
+			<input type="date" />
+		</div>
 		<div>
 			<input type="checkbox" id="checkbox" />
 			<label for="checkbox">checkbox</label>