basic structure and a bit of content

frontend/src/components/navigation.tsx

@@ -0,0 +1,20 @@
+
+const Navigation = () => {
+    return(
+        <nav id={'header'} class={'flex-no-wrap sticky w-screen py-2 shadow-black/5'}>
+        <ul class="flex">
+            <li class="mr-3">
+                <a class="inline-block border border-blue-500 rounded py-1 px-3 bg-blue-500 text-white" href="#">Active Pill</a>
+            </li>
+            <li class="mr-3">
+                <a class="inline-block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-1 px-3" href="#">Pill</a>
+            </li>
+            <li class="mr-3">
+                <a class="inline-block py-1 px-3 text-gray-400 cursor-not-allowed" href="#">Disabled Pill</a>
+            </li>
+        </ul>
+        </nav>
+    );
+};
+
+export { Navigation }