GlassyGrayscaleTabs
Glassmorphism Grayscale Simple Dashboard Tabs Component with Dark Mode Support
HTML Code
<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-0.5 flex space-x-6" aria-label="Tabs">
<a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600">
Dashboard
</a>
<a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-gray-500 text-sm font-medium text-gray-600 dark:text-gray-300 dark:border-gray-400">
Reports
</a>
<a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600">
Settings
</a>
</nav>
</div>
<div class="mt-4">
<!-- Tab content goes here -->
<p class="text-gray-700 dark:text-gray-300">Content for the selected tab.</p>
</div>
</div>Related Components
Neumorphic Tabs Component
A neumorphic tabs component in grayscale for blog content, with responsive design and dark mode support.
ArtDecoTabsComponent
A complex, responsive tabs component with an Art Deco aesthetic, designed for photography portfolios, featuring corporate blue tones and dark mode support.
Glassmorphism Tabs Component
Simple Glassmorphism Tabs Component for Portfolio, with responsive design and dark theme support. Uses vibrant color scheme.