Group up existing components into elements

elements/Tab/Tab.scarlet

@@ -0,0 +1,57 @@
+const tab-padding-x = 1rem
+
+.tab
+	horizontal
+	align-items center
+	color text-color
+	padding 0.5rem tab-padding-x
+	background-color tab-background
+	border ui-border
+	border-left none
+	white-space nowrap
+
+	:hover
+		color text-color
+		background-color tab-hover-background
+		cursor pointer
+
+	:active
+		transform none
+
+	&.active
+		background-color tab-active-background
+		color tab-active-color
+
+	:first-child
+		border-left ui-border
+		border-top-left-radius ui-element-border-radius
+		border-bottom-left-radius ui-element-border-radius
+
+	:last-child
+		border-top-right-radius ui-element-border-radius
+		border-bottom-right-radius ui-element-border-radius
+
+.tab-count
+	margin-left typography-margin
+	opacity 0.5
+
+< 920px
+	.tab
+		padding 0.75rem tab-padding-x
+
+		.padded-icon
+			margin-right 0
+
+	.tab-text,
+	.tab-count
+		display none
+
+.tabs
+	horizontal
+	justify-content center
+	margin content-padding calc(content-padding / 4)
+	margin-top 0
+
+.tab-groups
+	horizontal
+	justify-content center