GlassyGrayscaleTabs

Glassmorphism Grayscale Simple Dashboard Tabs Component with Dark Mode Support

Preview

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

Tabs Component

A responsive tabs component designed in a skeuomorphic style for an e-commerce application, using a pastel color scheme and Tailwind CSS.

Open

Material Design Tabs

Tabs Component with Material Design style, responsive effects, and dark theme support using Tailwind CSS, with no JavaScript.

Open

Neumorphic Tabs Component

A neumorphic tabs component in grayscale for blog content, with responsive design and dark mode support.

Open