Neumorphic Tabs 组件

<div class="flex flex-col bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-2xl mx-auto my-10"> 
  
  <!-- Tab Buttons --> 
  <div class="flex space-x-4 mb-6"> 
  
    <button class="flex-1 py-3 px-6 rounded-lg text-gray-800 dark:text-gray-200 
                   bg-gray-300 dark:bg-gray-700 
                   shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 
                   active:shadow-neumorphic-button-light-active dark:active:shadow-neumorphic-button-dark-active">
      Recent Articles
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Popular Posts
    </button>

    <button class="flex-1 py-3 px-6 rounded-lg text-gray-600 dark:text-gray-400 
                   bg-gray-200 dark:bg-gray-800 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   hover:shadow-neumorphic-button-light-hover dark:hover:shadow-neumorphic-button-dark-hover 
                   focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
      Categories
    </button>
    
  </div> 
  
  <!-- Tab Content (Recent Articles) --> 
  <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg 
              shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
              text-gray-700 dark:text-gray-300"> 
    <h3 class="text-xl font-semibold mb-4">The Art of Neumorphism in Web Design</h3> 
    <p class="mb-4">Explore the subtle and tactile design trend that is Neumorphism. Learn how to create soft, extruded, and impressed elements that bring a unique depth to your user interfaces.</p> 
    
    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <span>John Doe • October 26, 2023</span>
    </div>
    
  </div> 
  
  <!-- You would typically have other tab content divs here, hidden by default and shown with JavaScript --> 
  <!-- For this example, only one tab content is shown as per the no JavaScript constraint --> 
  
</div>

<!-- Custom Styles for Neumorphism (add to your CSS or a style block) -->
<style>
  /* Light Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
  }

  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }

  /* Light Neumorphic Button Hover States */
  .shadow-neumorphic-button-light-hover {
    box-shadow: 2px 2px 4px #b0b0b0, -2px -2px 4px #ffffff;
  }

  /* Light Neumorphic Button Active States (pressed in) */
  .shadow-neumorphic-button-light-active {
    box-shadow: inset 2px 2px 4px #b0b0b0, inset -2px -2px 4px #ffffff;
  }

  /* Dark Neumorphic Shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #2a2a2a, -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 6px 6px 12px #2a2a2a, inset -6px -6px 12px #3a3a3a;
  }

  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #3a3a3a;
  }

  /* Dark Neumorphic Button Hover States */
  .dark .shadow-neumorphic-button-dark-hover {
    box-shadow: 2px 2px 4px #2a2a2a, -2px -2px 4px #3a3a3a;
  }

  /* Dark Neumorphic Button Active States (pressed in) */
  .dark .shadow-neumorphic-button-dark-active {
    box-shadow: inset 2px 2px 4px #2a2a2a, inset -2px -2px 4px #3a3a3a;
  }
</style>