搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

跳至内容链接

用于 Web 应用程序中辅助功能的极简跳至内容链接，专为仪表板设计。

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-1/2 focus:-translate-x-1/2 focus:bg-gray-800 focus:text-white focus:px-4 focus:py-2 focus:rounded-b-lg focus:z-50 dark:focus:bg-gray-100 dark:focus:text-gray-900">Skip to main content</a>

Loaders 组件

一个响应式 Material Design 加载器组件，具有三元配色方案，适用于投资组合，具有深色主题支持和多个互动元素。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Component: Complex Material Design Loader for Portfolio -->
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-8 animate-fade-in">

    <!-- Header/Title Section -->
    <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 capitalize">Portfolio Showcase Loading</h2>
      <div class="flex space-x-2">
        <div class="w-8 h-8 bg-purple-500 dark:bg-purple-600 rounded-full animate-pulse"></div>
        <div class="w-8 h-8 bg-green-500 dark:bg-green-600 rounded-full animate-pulse delay-75"></div>
      </div>
    </div>

    <!-- Project/Item Loading Cards (Grid Layout) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Loading Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-150">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-300">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 4 (for larger screens) -->
      <div class="hidden lg:block bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-[450ms]">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

    </div>

    <!-- Progress Bar Section -->
    <div class="space-y-4">
      <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full w-2/3 bg-gradient-to-r from-blue-500 to-green-400 dark:from-blue-600 dark:to-green-500 rounded-full animate-progress-fill"></div>
      </div>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Loading portfolio items... Please wait.</p>
    </div>

    <!-- Call to Action / Interactive Elements (Placeholder) -->
    <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto px-8 py-3 bg-fuchsia-500 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 animate-bounce-slow">
        <div class="flex items-center justify-center space-x-2">
          <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span>Processing Data</span>
        </div>
      </button>
      <button class="w-full sm:w-auto px-8 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
        <span class="animate-pulse">Fetching Assets</span>
      </button>
    </div>

  </div>

  <!-- Tailwind CSS Customizations (Animations) -->
  <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards; 
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }

    @keyframes progress-fill {
      0% { width: 0%; }
      100% { width: 66.66%; } /* Simulating 2/3 progress */
    }
    .animate-progress-fill {
      animation: progress-fill 1.5s ease-out forwards;
    }
    
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      25% { transform: translateY(-5px); }
      50% { transform: translateY(0); }
      75% { transform: translateY(-2px); }
      100% { transform: translateY(0); }
    }
    .animate-bounce-slow {
        animation: bounce-slow 4s infinite ease-in-out;
    }

  </style>

</div>

搜索框组件

适用于商业/公司网站的响应式搜索框组件，具有微交互和类似的配色方案。它包括一个搜索输入、一个按钮和一个带有用户头像和文本的动态结果下拉列表，支持深色模式。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md">
    <div class="relative flex items-center w-full h-12 rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden group">
      <div class="grid place-items-center h-full w-12 text-gray-300 dark:text-gray-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>

      <input
        class="peer h-full w-full outline-none text-sm text-gray-700 dark:text-gray-200 pr-2 bg-white dark:bg-gray-800 transition-all duration-300 focus:w-[calc(100%-3rem)]"
        type="text"
        id="search-input"
        placeholder="Search for services, products, or people..." />

      <button class="absolute right-0 h-full w-12 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded-r-lg flex items-center justify-center transition-all duration-300 group-focus-within:w-24 group-focus-within:bg-blue-600 group-focus-within:dark:bg-blue-800">
        <span class="hidden group-focus-within:block text-sm">Search</span>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 group-focus-within:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>
    </div>

    <!-- Search Results Dropdown -->
    <div class="absolute w-full mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden opacity-0 scale-y-0 transform origin-top transition-all duration-300 group-focus-within:opacity-100 group-focus-within:scale-y-100">
        <ul class="py-2">
            <!-- Result Item 1 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Software Engineer at TechCorp</p>
                </div>
            </li>
            <!-- Result Item 2 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Marketing Manager at GlobalBiz</p>
                </div>
            </li>
            <!-- Result Item 3 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Company XYZ Services</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Cloud Computing Solutions</p>
                </div>
            </li>
            <!-- Result Item 4 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1018/100/100" alt="Product Image">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Product A</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Advanced Analytics Platform</p>
                </div>
            </li>
            <!-- Result Item 5 -->
            <li class="flex items-center px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
                <img class="w-8 h-8 rounded-full mr-3" src="https://picsum.photos/id/1015/100/100" alt="Service Image">
                <div>
                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">Consulting Services</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Strategic Business Consultation</p>
                </div>
            </li>
        </ul>
    </div>
  </div>
</div>

拟物化仪表板 Tooltip

一个用于仪表板的复杂拟物化工具提示组件，具有三元配色方案和响应式设计，支持深色模式，使用 Tailwind CSS 构建，无需 JavaScript。

打开预览

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="relative group">
    <!-- Trigger Element (e.g., a button or icon) -->
    <button class="px-6 py-3 text-white rounded-lg shadow-lg bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 transform hover:scale-105">
      Hover for Dashboard Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-80 p-6 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 group-hover:visible transition-all duration-500 transform scale-90 group-hover:scale-100
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                border-4 border-gray-300 dark:border-gray-600
                hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-800
                flex flex-col space-y-4
                pointer-events-none group-hover:pointer-events-auto">

      <!-- Top Bar with Icon and Title -->
      <div class="flex items-center pb-3 border-b-2 border-gray-300 dark:border-gray-600">
        <svg class="w-8 h-8 mr-3 text-indigo-700 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L12 21.75l2.25-4.75M12 17V3m-4.5 9h9"></path>
        </svg>
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Dashboard Overview</h3>
      </div>

      <!-- Key Metrics Section -->
      <div class="grid grid-cols-2 gap-4">
        <div class="p-3 rounded-lg bg-gradient-to-br from-red-300 to-red-500 dark:from-red-700 dark:to-red-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Revenue</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">$12,450</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-green-300 to-green-500 dark:from-green-700 dark:to-green-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Users</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">8,900</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-700 dark:to-yellow-900 shadow-inner">
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Completion</p>
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">75%</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-700 dark:to-purple-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Avg. Time</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">4:30 min</p>
        </div>
      </div>

      <!-- Recent Activity / News Feed Mock-up -->
      <div class="p-3 rounded-lg bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-inner border border-gray-200 dark:border-gray-700">
        <h4 class="mb-2 text-md font-semibold text-gray-700 dark:text-gray-200">Recent Activity</h4>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex items-center">
            <img class="object-cover w-6 h-6 mr-2 rounded-full shadow" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <span>New user

拟物化图像灯箱

一个响应式图像灯箱组件，具有用于投资组合的拟物化灰度设计，支持深色模式。

打开预览

                
<div class="p-4 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Lightbox Item 1 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=1" alt="Portfolio Image 1" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 2 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=2" alt="Portfolio Image 2" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Lightbox Item 3 -->
    <div class="relative group cursor-pointer">
      <img src="https://picsum.photos/600/400?random=3" alt="Portfolio Image 3" class="w-full h-64 object-cover rounded-lg shadow-xl 
                  transform transition-transform duration-300 group-hover:scale-105 
                  border-4 border-gray-300 dark:border-gray-700 
                  group-hover:border-gray-500 dark:group-hover:border-gray-400">
      <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 
                  flex items-center justify-center transition-opacity duration-300 rounded-lg 
                  border-4 border-transparent group-hover:border-gray-500 dark:group-hover:border-gray-400">
        <p class="text-white text-lg font-bold">View Project</p>
      </div>
    </div>

    <!-- Add more lightbox items as needed -->

  </div>
</div>

社交媒体帖子模态

一个简单、响应迅速、受 Material Design 启发的模态组件，具有相似的配色方案，适用于社交媒体应用程序。支持深色主题。

打开预览

                
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center">
  <div class="relative p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
    <div class="mt-3 text-center">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Post Created!</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-400">Your post has been successfully shared with your followers.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder image for social media post">
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-900">Awesome!</button>
      </div>
    </div>
  </div>
</div>

Mega Menu 组件

使用 Tailwind CSS 的具有深色模式 UI、类似配色方案和复杂复杂性的 Mega Menu Component，用于仪表板目的。它应该是响应式的，并使用 Tailwind dark：前缀支持深色主题。无需 JavaScript 代码，只需使用 Tailwind 类的 HTML。图片来自 picsum.photos，头像来自 randomuser.me。

打开预览

                <nav class="relative bg-[#1a202c] dark:bg-[#0e131d] shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex-shrink-0 flex items-center">
                    <a href="#" class="text-white text-2xl font-bold">Dashboard</a>
                </div>
                <div class="hidden md:ml-6 md:flex md:space-x-8">
                    <a href="#" class="border-b-2 border-indigo-500 text-white dark:text-gray-300 px-3 py-2 text-sm font-medium">Home</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Analytics</a>
                    <a href="#" class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium">Reports</a>
                    <div class="relative group">
                        <button class="text-gray-300 dark:text-gray-500 hover:border-gray-300 hover:text-white dark:hover:text-gray-300 px-3 py-2 text-sm font-medium flex items-center">
                            Products
                            <svg class="ml-2 h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <div class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 hidden group-hover:block">
                            <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                                <div class="relative grid gap-6 bg-gray-800 dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 20v-3m0 0l-1.673-1.673M12 17l1.673-1.673M11 10V6m0 0L8.327 7.673M11 6l1.673 1.673m-1.673 4h4.673" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product A</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product A.</p>
                                        </div>
                                    </a>
                                    <a href="#" class="flex items-start -m-3 p-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800">
                                        <div class="flex-shrink-0 h-6 w-6 text-indigo-400">
                                            <!-- Heroicon name: light bulb -->
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                                            </svg>
                                        </div>
                                        <div class="ml-4">
                                            <p class="text-base font-medium text-white">Product B</p>
                                            <p class="mt-1 text-sm text-gray-400">Description for Product B.</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hidden md:ml-6 md:flex md:items-center">
                <button class="bg-gray-700 dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
                <div class="ml-3 relative">
                    <div>
                        <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                            <span class="sr-only">Open user menu</span>
                            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                        </button>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <!-- Mobile menu button -->
                <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <!--
                        Icon when menu is closed.

                        Heroicon name: outline/menu

                        Menu open: "hidden", Menu closed: "block"
                    -->
                    <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <!--
                        Icon when menu is open.

                        Heroicon name: outline/x

                        Menu open: "block", Menu closed: "hidden"
                    -->
                    <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Analytics</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Products</a>
        </div>
        <div class="pt-4 pb-3 border-t border-gray-700">
            <div class="flex items-center px-5">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                </div>
                <div class="ml-3">
                    <div class="text-base font-medium text-white">John Doe</div>
                    <div class="text-sm font-medium text-gray-400">[email protected]</div>
                </div>
                <button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
                    <span class="sr-only">View notifications</span>
                    <!-- Heroicon name: bell -->
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                </button>
            </div>
            <div class="mt-3 px-2 space-y-1">
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
            </div>
        </div>
    </div>
</nav>

数据表组件

响应式数据表组件，采用 Neumorphism 设计、三元配色方案和深色模式支持，适用于博客或内容网站。

打开预览

                <div class="p-8 font-sans antialiased text-gray-700 bg-gray-200 dark:bg-gray-900 dark:text-gray-200 transition-all duration-500">
  <div class="p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="mb-6 text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">Our Latest Posts</h2>
    <div class="overflow-x-auto">
      <table class="w-full text-left table-auto">
        <thead>
          <tr>
            <th class="p-4 rounded-tl-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Title</th>
            <th class="p-4 bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Category</th>
            <th class="p-4 rounded-tr-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post1/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Exploring Neumorphism in UI Design                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-200 rounded-full dark:text-blue-200 dark:bg-blue-800">Design</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-15</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post2/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                The Future of Web Development                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">Technology</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-20</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post3/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Mastering Tailwind CSS                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-red-800 bg-red-200 rounded-full dark:text-red-200 dark:bg-red-800">Front-end</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-25</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post4/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                A Journey into Minimalist Art                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">Art</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-02-01</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows for light theme */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a6a6a6, -8px -8px 16px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a6a6a6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows for dark theme */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #2e2e2e;
  }

</style>

<script>
  // This script is for demonstration purposes to toggle dark mode.
  // In a real application, you might use a theme switcher or OS preference.
  document.documentElement.classList.add('dark');
</script>

Price Display 组件

一个 Neumorphism 样式的价格显示组件，具有互补的配色方案（柔和的橙色和浅蓝色），对于电子商务来说，复杂性适中。它具有响应式设计，支持深色主题。该组件显示产品图片、标题和价格，并带有“添加到购物车”按钮。深色模式使用不饱和的互补色。

打开预览

                <div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-sm mx-auto transition-all duration-300">
    
    <!-- Product Image (Placeholder) -->
    <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark overflow-hidden">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover">
    </div>

    <!-- Product Title -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Neumorphic Product Title</h3>
    
    <!-- Product Description (Optional - Uncomment if needed) -->
    <!-- <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">This is a brief description of the product, showcasing its features and benefits.</p> -->

    <!-- Price and Add to Cart -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-3xl font-bold text-orange-600 dark:text-orange-400">$129.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-lg shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark active:shadow-inner-neumorphic-btn-light dark:active:shadow-inner-neumorphic-btn-dark transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Add to Cart
      </button>
    </div>

    <!-- Additional Details (Optional) -->
    <div class="grid grid-cols-2 gap-3 text-sm text-gray-700 dark:text-gray-300">
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Category:</strong> Electronics</p>
      </div>
      <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <p><strong class="text-gray-800 dark:text-gray-200">Availability:</strong> In Stock</p>
      </div>
    </div>

  </div>

  <!-- TailwindCSS Config for Neumorphism Shadows (Add this to your tailwind.config.js) -->
  <div style="display: none;">
    <!-- You would typically add this to your tailwind.config.js file under 'extend' -->
    <pre>
      module.exports = {
        theme: {
          extend: {
            boxShadow: {
              'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
              'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #1a1a1a',
              'inner-neumorphic-light': 'inset 5px 5px 10px #bdbdbd, inset -5px -5px 10px #ffffff',
              'inner-neumorphic-dark': 'inset 5px 5px 10px #333333, inset -5px -5px 10px #6d6d6d',
              'neumorphic-btn-light': '6px 6px 12px #9a9a9a, -6px -6px 12px #ffffff',
              'neumorphic-btn-dark': '6px 6px 12px #444444, -6px -6px 12px #222222',
              'inner-neumorphic-btn-light': 'inset 3px 3px 6px #8c8c8c, inset -3px -3px 6px #ffffff',
              'inner-neumorphic-btn-dark': 'inset 3px 3px 6px #3b3b3b, inset -3px -3px 6px #5f5f5f',
            }
          }
        }
      }
    </pre>
  </div>

</div>

轮播滑块组件

一个支持深色模式的响应式轮播滑块组件。此组件仅使用 HTML 和 Tailwind CSS，不使用 JavaScript。它具有简单的布局，活动幻灯片具有鲜艳的色彩，适合博客或内容消费。

打开预览

                <div class="relative w-full max-w-3xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden">
  <!-- Carousel wrapper -->
  <div class="relative h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg">
    <!-- Item 1 -->
    <div id="carousel-item-1" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0">
      <img src="https://picsum.photos/seed/1/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Simple Dark Mode Carousel</h3>
        <p class="text-sm md:text-base">A clean and vibrant carousel for your blog.</p>
      </div>
    </div>
    <!-- Item 2 -->
    <div id="carousel-item-2" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/2/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Engaging Content Display</h3>
        <p class="text-sm md:text-base">Showcase your articles with vibrant highlights.</p>
      </div>
    </div>
    <!-- Item 3 -->
    <div id="carousel-item-3" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/3/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Responsive Across Devices</h3>
        <p class="text-sm md:text-base">Looks great on desktop, tablet, and mobile.</p>
      </div>
    </div>
  </div>
  <!-- Slider indicators (Dots) -->
  <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2 rtl:space-x-reverse">
    <button type="button" class="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-600" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 2"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 3"></button>
  </div>
  <!-- Slider controls -->
  <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
      </svg>
      <span class="sr-only">Previous</span>
    </span>
  </button>
  <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
      </svg>
      <span class="sr-only">Next</span>
    </span>
  </button>
</div>

1 ... 138 139 140 141 142 ... 335