Components Tabs Neumorphism Tabs Component

Neumorphism Tabs Component

A neumorphic tabs component for dashboard UIs, featuring a grayscale color scheme, responsive design, and dark theme support using only HTML and Tailwind CSS.

Preview

HTML Code

<div class="p-4 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <div class="flex space-x-4 mb-6">
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Overview
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-800 dark:text-white text-sm font-medium 
                     bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Analytics
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Reports
      </button>
    </div>

    <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <!-- Content for the active tab -->
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Analytics Dashboard</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Card 1 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">1,234,567</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Page Views</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">5,678,901</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Bounce Rate</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">32.5%</p>
        </div>
      </div>
    </div>

  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #4a4a4a;
    }
    .shadow-neumorphic-inset-light {
      box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4a4a4a;
    }
  </style>
</div>

Related Components

Tabs Component

A responsive tabs component designed for social media interfaces, featuring microinteractions and a dark theme. The component includes multiple interactive elements and uses Tailwind CSS.

Open

Dark Mode Tabs Component

A responsive tabs component designed with dark mode in mind, utilizing Tailwind CSS.

Open

Tabs Component

Responsive Tabs Component with Earth tones and Microinteractions for Business websites, supporting dark mode using Tailwind CSS. Uses only HTML and Tailwind classes.

Open