tab styling

web/components/layout/tabs.tsx

@@ -17,31 +17,35 @@ export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) {
 
   return (
     <div>
-      <nav className="flex space-x-4" aria-label="Tabs">
+      <div className="border-b border-gray-200">
+        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
           {tabs.map((tab, i) => (
             <Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}>
               <a
                 key={tab.title}
-              className={clsx(
-                tab.title === activeTab.title
-                  ? 'bg-gray-200 text-gray-700'
-                  : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700',
-                'rounded-md px-3 py-2 text-sm font-medium'
-              )}
-              aria-current={tab.title === activeTab.title ? 'page' : undefined}
                 onClick={(e) => {
                   if (!tab.href) {
                     e.preventDefault()
                   }
                   setActiveIndex(i)
                 }}
+                className={clsx(
+                  activeIndex === i
+                    ? 'border-indigo-500 text-indigo-600'
+                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                  'cursor-pointer whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium'
+                )}
+                aria-current={activeIndex === i ? 'page' : undefined}
               >
-              {tab.tabIcon ? <span className="mr-2">{tab.tabIcon}</span> : null}
+                {tab.tabIcon ? (
+                  <span className="mr-2">{tab.tabIcon}</span>
+                ) : null}
                 {tab.title}
               </a>
             </Link>
           ))}
         </nav>
+      </div>
 
       <div className="mt-4">{activeTab.content}</div>
     </div>