Material Design Tabs Component
A Material Design styled Tabs Component using Tailwind CSS, featuring responsive effects and dark theme support.
HTML Code
<div class="w-full">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-0.5 flex space-x-6" aria-label="Tabs">
<button type="button" class="group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium" aria-current="page">
<svg class="mr-2 h-5 w-5 text-indigo-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M1.5 1.5A.75.75 0 000 2.25v13.5a.75.75 0 00.75.75h15a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75H1.5zM10.5 6a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zm3 0a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zM6 3a.75.75 0 00-1.5 0v9a.75.75 0 001.5 0V3z" clip-rule="evenodd" />
</svg>
<span class="text-indigo-600 dark:text-indigo-400">My Account</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm1.875-3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.375 21a1.125 1.125 0 001.125 1.125h15A1.125 1.125 0 0020.625 21V6.75a1.125 1.125 0 00-1.125-1.125h-15a1.125 1.125 0 00-1.125 1.125V21zM19.125 6.75a.375.375 0 00-.375-.375H4.875a.375.375 0 00-.375.375v13.5c0 .207.168.375.375.375h15c.207 0 .375-.168.375-.375V6.75z" clip-rule="evenodd" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Company</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M10.5 6a.75.75 0 100 1.5 1.5 1.5 0 011.5 1.5v1.5a.75.75 0 101.5 0V9a3 3 0 00-3-3zM3 19.5a1.5 1.5 0 011.5-1.5h15a1.5 1.5 0 011.5 1.5v.75a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75v-.75zM3 6.75A.75.75 0 013.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 013 7.5v-.75zM6 6.75A.75.75 0 016.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 016 7.5v-.75zM9 6.75A.75.75 0 019.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 019 7.5v-.75z" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Teams</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 1.5a.75.75 0 01.75.75V3a.75.75 0 01-1.5 0V2.25a.75.75 0 01.75-.75zM12 21a.75.75 0 01.75.75V22.5a.75.75 0 01-1.5 0V21.75a.75.75 0 01.75-.75zM19.5 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM6 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM19.5 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM6 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM15.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM15.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM12 6.75a3 3 0 100 6 3 3 0 000-6z" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Billing</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z" clip-rule="evenodd" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Integrations</span>
</button>
</nav>
</div>
</div>Related Components
Tabs Component
A responsive tabs component designed for dark mode using Tailwind CSS. It features different tabs that users can click to reveal content, along with placeholder images and avatars.
Glassmorphism Tabs Component
A responsive tabs component with glassmorphism style, designed for social media interfaces. It features a frosted glass-like effect using Tailwind CSS with a grayscale color scheme. The design supports dark mode.
Tabs Component
A responsive Tabs Component with a Skeuomorphic design, an Analogous color scheme, and a dark theme support, suitable for professional business websites. The component uses Tailwind CSS for styling and includes no JavaScript.