Two-Tier Responsive Navigation Tab Component

This Tailwind CSS code creates a responsive navigation tab component with two stylistic tiers based on screen size. On small screens, it shows a dropdown select menu to choose between tabs. On larger screens, it displays the tab links horizontally. The dropdown uses Tailwind's .sr-only, .block, .rounded-md, .border-gray-300, .focus:border-indigo-500, and .focus:ring-indigo-500 utilities to style an accessible select menu. The tab links use .flex, .space-x-4, .text-gray-500, .hover:text-gray-700, .rounded-md, .px-3, .py-2, .text-sm, and .font-medium to style plain tab links. The .bg-indigo-100 and .text-indigo-700 utilities highlight the active tab. The .hidden and .sm:block utilities create the responsive behavior, hiding and showing each tab component based on screen size.

Similar Components

Other components related to tailwind, css, responsive, navigation, tabs, dropdown, select, accessibility tags