diff --git a/index.html b/index.html
index 38d39f1..6378fc6 100644
--- a/index.html
+++ b/index.html
@@ -113,12 +113,12 @@
 
 					<div class="cbox-row">
 						<label class="cbox">
-							<input type="radio" name="radio-button" checked>
+							<input type="radio" name="radios" checked>
 							<span>Radio 1</span>
 						</label>
 	
 						<label class="cbox">
-							<input type="radio" name="radio-button">
+							<input type="radio" name="radios">
 							<span>Radio 2</span>
 						</label>
 					</div>
@@ -128,18 +128,18 @@
 						<span>Check me!</span>
 					</label>
 
-					<div class="tabs">
+					<div class="tabs offset">
 						<label>
-							<input type="radio" name="tabs-a" checked>
-							<div>Ahoj</div>
+							<input type="radio" name="tabs" checked>
+							<div>Home</div>
 						</label>
 						<label>
-							<input type="radio" name="tabs-a">
-							<div>Ahoj</div>
+							<input type="radio" name="tabs">
+							<div>Account</div>
 						</label>
 						<label>
-							<input type="radio" name="tabs-a">
-							<div>Ahoj</div>
+							<input type="radio" name="tabs">
+							<div>Settings</div>
 						</label>
 					</div>
 
diff --git a/src/tabs.css b/src/tabs.css
new file mode 100644
index 0000000..d5330da
--- /dev/null
+++ b/src/tabs.css
@@ -0,0 +1,67 @@
+.tabs {
+	display: flex;
+	gap: 20px;
+}
+
+.tabs input {
+	position: absolute;
+	opacity: 0;
+	pointer-events: none;
+	visibility: none;
+}
+
+.tabs label {
+	cursor: pointer;
+}
+
+.tabs div {
+	position: relative;
+	padding: 10px 0;
+	font-weight: 700;
+	transition: color .2s;
+}
+
+.tabs div::after {
+	content: "";
+	position: absolute;
+	width: 70%;
+	height: var(--synergy-border-width);
+	background-color: var(--synergy-border-active);
+	bottom: 0; 
+	left: 15%;
+	transition: all .2s;
+	opacity: 0;
+	transform: scaleX(0);
+	border-radius: 10px;
+}
+
+.tabs div::before {
+	z-index: -1;
+	content: "";
+	position: absolute;
+	top: 13%;
+	left: -8px;
+	width: calc(100% + 16px);
+	height: 75%;
+	opacity: 0;
+	border-radius: var(--synergy-border-radius);
+	background-color: var(--synergy-tab-highlight);
+	transition: opacity .2s;
+}
+
+.tabs :is(input:focus-visible + div, div:hover)::before {
+	opacity: 1;
+}
+
+.tabs :is(input:checked + div, div:hover) {
+	color: var(--synergy-border-active);
+}
+
+.tabs input:checked + div::after {
+	opacity: 1;
+	transform: none;
+}
+
+.tabs.offset {
+	margin: 0 8px;
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 0c7e036..d1231e6 100644
--- a/style.css
+++ b/style.css
@@ -3,3 +3,4 @@
 @import url("src/input.css");
 @import url("src/toggle.css");
 @import url("src/checkbox.css");
+@import url("src/tabs.css");
diff --git a/web/lib.ts b/web/lib.ts
index 357c845..5e57e3e 100644
--- a/web/lib.ts
+++ b/web/lib.ts
@@ -15,6 +15,7 @@ export namespace Exporter {
 		{name: "Fields", file: "input", enabled: true},
 		{name: "Toggles", file: "toggle", enabled: true},
 		{name: "Checkboxes and radios", file: "checkbox", enabled: true},
+		{name: "Tabs", file: "tabs", enabled: true},
 	]);
 
 	interface Result {
@@ -175,7 +176,8 @@ export class Theme {
 		variables.push(this.var("border", this.cAlpha(this.main, .4)));
 		variables.push(this.var("border-active", this.cAlpha(this.main)));
 
-		variables.push(this.var("focus-highlight", this.cMix(this.main, this.bg, .25)));
+		variables.push(this.var("focus-highlight", this.cAlpha(this.main, .25)));
+		variables.push(this.var("tab-highlight", this.cAlpha(this.main, .1)));
 	
 		variables.push(this.var("label", this.cMix(this.main, this.bg, .8)));
 		variables.push(this.var("label-active", this.cMix(this.main, this.bg)));