Increase tab size (#80)

src/components/TabNav/TabNav.scss

@@ -33,7 +33,7 @@
 }
 
 .tab {
-	@include fonts.maison-extended-700-1;
+	@include fonts.maison-extended-700-2;
 
 	margin: 0 12px;
 	padding: 16px 0 14px;

src/components/TabNav/TabNav.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styles from './TabNav.scss';
+
+function TabNav ( props: {
+	/**
+	 * Child node to be rendered as the inner HTML of the component.
+	 */
+	children: React.ReactNode,
+} ) {
+	return (
+		<nav className={styles.container}>
+			<div className={styles[ 'scroll-container' ]}>
+				<ul className={styles.tablist}>
+					{props.children}
+				</ul>
+			</div>
+		</nav>
+	);
+}
+
+function TabNavItem ( props: {
+	/**
+	 * Child node to be rendered as the inner HTML of the component.
+	 */
+	children: React.ReactNode,
+
+	/**
+	 * Whether this is the currently active tab. Applies
+	 * `aria-current="true"`. Only one tab may be active at a time.
+	 */
+	isActive: boolean,
+} ) {
+	return <li aria-current={props.isActive} className={styles.tab}>{props.children}</li>;
+}
+
+export { TabNav, TabNavItem };