diff --git a/src/app.css b/src/app.css
index 5328f5d..ada4149 100644
--- a/src/app.css
+++ b/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;
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 58e17fc..b712dab 100644
--- a/src/routes/+page.svelte
+++ b/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>