搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

数据表组件

一个以复古/复古风格为主题的响应式数据表组件，使用 Tailwind CSS 设计，支持深色模式，并具有 80 年代/90 年代的怀旧设计元素。

                <div class="overflow-x-auto bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-gray-200">Retro Data Table</h2>
    <table class="min-w-full border-collapse border border-gray-300 dark:border-gray-600">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">#</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Name</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Email</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Avatar</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800">
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">1</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">John Doe</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">2</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Jane Smith</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">3</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Alice Johnson</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">4</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Bob Brown</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
            </tr>
        </tbody>
    </table>
</div>

社交分享按钮

社交分享按钮组件，具有 Glassmorphism 设计、响应式效果和深色主题支持。不使用 JavaScript。

打开预览

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-4 p-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg">
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.367 8.367 0 01-2.605.996 4.103 4.103 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.273 4.134 4.134 0 001.27 5.51A4.073 4.073 0 01.8 7.71v.057a4.1 4.1 0 003.294 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
      </svg>
    </a>
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.5v-6.533H5.933V12.017H8.83v-2.57c0-3.518 2.13-5.425 5.242-5.425 1.493 0 2.99.22 2.99.22v3.293h-1.68c-1.63.005-2.16.94-2.16 1.902v2.753h3.332l-.533 3.44H14.17V21.5c3.966-1.32 6.83-5.077 6.83-9.483C22 6.484 17.523 2 12 2z" clip-rule="evenodd"></path>
      </svg>
    </a>
    <a href="#" class="p-3 rounded-full bg-white bg-opacity-50 dark:bg-gray-800 dark:bg-opacity-50 text-gray-800 dark:text-white hover:scale-110 transition duration-300">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12.964 0H1.036C.465 0 0 .465 0 1.036v11.928c0 .571.465 1.036 1.036 1.036h11.928c.571 0 1.036-.465 1.036-1.036V1.036C14 0 .571 0 12.964 0zM4.568 11.669H2.473V4.05H4.568v7.619zM3.52 3.012c-.775 0-1.411-.636-1.411-1.416 0-.78.636-1.416 1.411-1.416.776 0 1.411.636 1.411 1.416 0 .78-.635 1.416-1.411 1.416zM11.668 11.669H9.57v-3.48c0-.831-.015-1.898-1.158-1.898-1.16 0-1.334.904-1.334 1.84v3.538H5.091V4.05h2.008v.92h.028c.277-.529.959-1.083 1.984-1.083 2.121 0 2.518 1.392 2.518 3.191v7.68z" clip-rule="evenodd"></path>
      </svg>
    </a>
  </div>
</div>

拟物化社交组件

具有拟物化设计、响应式效果和深色主题支持的社交媒体组件。

打开预览

                <div class="skeuosocial-component bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-6 max-w-sm mx-auto">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    This is a skeuomophic social media component design using Tailwind CSS.
  </p>
  <img class="rounded-lg shadow-md mb-4" src="https://picsum.photos/400/250" alt="Post Image">
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.95-4.95a1 1 0 111.414 1.414L10 15.414l-6.364-6.364a1 1 0 111.414-1.414L10 12.586z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h10v8H5V6zm1 1v6h8V7H6z"></path></svg>
      <span>Opens</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3a1 1 0 011 1v5a1 1 0 01-2 0V6a1 1 0 011-1zm0 10a1 1 0 100-2 1 1 0 000 2z"></path></svg>
      <span>Share</span>
    </div>
  </div>
</div>

热图组件

具有响应式效果和深色主题支持的热图组件。

打开预览

                <div class="bg-gray-900 text-white p-8">
  <h2 class="text-2xl font-bold mb-4">Heat Map</h2>
  <div class="grid grid-cols-7 gap-1">
    <!-- Days of the week -->
    <div class="text-center text-sm text-gray-400">Sun</div>
    <div class="text-center text-sm text-gray-400">Mon</div>
    <div class="text-center text-sm text-gray-400">Tue</div>
    <div class="text-center text-sm text-gray-400">Wed</div>
    <div class="text-center text-sm text-gray-400">Thu</div>
    <div class="text-center text-sm text-gray-400">Fri</div>
    <div class="text-center text-sm text-gray-400">Sat</div>

    <!-- Heat map squares (example data) -->
    {[...Array(42)].map((_, i) => (
      `<div key=${i} class="h-8 bg-gray-700 rounded heat-square data-level-{{
        (
          () => {
            const random = Math.random();
            if (random < 0.4) return 1; /* low activity */
            if (random < 0.7) return 2; /* medium activity */
            if (random < 0.9) return 3; /* high activity */
            return 4; /* very high activity */
          }
        )()
      }}"></div>`
    )).join("")}
  </div>

  <style>
    .heat-square[data-level="1"] {
      background-color: #1e3a8a; /* blue-900 */
    }
    .heat-square[data-level="2"] {
      background-color: #1d4ed8; /* blue-700 */
    }
    .heat-square[data-level="3"] {
      background-color: #3b82f6; /* blue-500 */
    }
    .heat-square[data-level="4"] {
      background-color: #60a5fa; /* blue-400 */
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .grid-cols-7 {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
      }
      .heat-square {
        height: 40px;
      }
    }
  </style>
</div>

粗犷主义关注按钮

一个野兽派跟随按钮，支持响应式和深色模式。

打开预览

                <button class="bg-black text-white font-bold py-2 px-4 border border-black active:bg-zinc-700 active:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50 dark:bg-white dark:text-black dark:border-white dark:active:bg-zinc-300 dark:active:border-zinc-300 dark:focus:ring-white">Follow</button>

认证组件

专为深色模式 UI 设计的响应式身份验证组件，具有具有 Tailwind CSS 样式的登录和注册表单。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
  <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="email">Email</label>
        <input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
    </form>
    <div class="mt-4 text-center">
      <a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
    </div>
    <div class="mt-6 border-t border-gray-600"></div>
    <h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
        <input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
        <input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
        <input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
    </form>
    <div class="mt-4 text-center">
      <small>Or sign up using</small>
      <div class="flex justify-center mt-2">
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
      </div>
    </div>
  </div>
</div>

购物车组件

一个响应式购物车组件，采用粗野主义风格设计，具有高对比度和不寻常的布局。它支持 Tailwind CSS 的深色主题。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex justify-between items-center mt-4">
            <h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
            <p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
        </div>
        <button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
    </div>
    <div class="flex items-center justify-center mt-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
    </div>
</div>

一个响应式数据表组件，使用 Tailwind CSS 以 80 年代/复古美学为样式。它采用块状设计、充满活力的色彩点缀（浅色模式下为紫色/橙色，深色模式下为绿色/霓虹灯）和等宽字体，营造出怀旧的科技感。该表格包括不同的标题和行样式、带边框的元素（如头像和状态徽章），并通过 CSS 支持深色模式。占位符数据包括用户头像、联系信息、状态徽章、角色和加入日期。该表可在较小的屏幕上水平滚动，以获得更好的响应能力。

打开预览

                <!-- Component Start -->
<div class="font-mono bg-orange-100 dark:bg-gray-900 p-4 sm:p-8 rounded-none border-4 border-purple-600 dark:border-green-400 shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-bold text-purple-700 dark:text-yellow-300 mb-6 text-center uppercase tracking-wider">
    User Archives ~ System Log
  </h2>
  <div class="overflow-x-auto rounded-none border-2 border-purple-500 dark:border-green-500">
    <table class="min-w-full w-full">
      <thead class="bg-purple-500 dark:bg-green-500 text-sm uppercase">
        <tr>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            User Profile
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Contact_Info
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Status_Signal
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest border-r-2 border-purple-400 dark:border-green-600 text-left">
            Assigned_Role
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 font-bold text-white dark:text-gray-900 tracking-widest text-left">
            Join_Date
          </th>
        </tr>
      </thead>
      <tbody class="bg-orange-50 dark:bg-gray-800 divide-y-2 divide-purple-300 dark:divide-green-700">
        <!-- Row 1 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar Max Power">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Max Power</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 101</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Online</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-green-200 text-green-800 dark:bg-green-600 dark:text-green-100 border-2 border-green-500 dark:border-green-300">
              ACTIVE
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Net Runner
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1985-04-12
          </td>
        </tr>
        <!-- Row 2 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/47.jpg" alt="User Avatar Glitch Martin">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Glitch Martin</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 202</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Offline</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-red-200 text-red-800 dark:bg-red-600 dark:text-red-100 border-2 border-red-500 dark:border-red-300">
              INACTIVE
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Code Weaver
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1991-11-20
          </td>
        </tr>
        <!-- Row 3 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/men/62.jpg" alt="User Avatar Rex Viper">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Rex "Viper" Fury</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 303</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Online</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-yellow-200 text-yellow-800 dark:bg-yellow-600 dark:text-yellow-100 border-2 border-yellow-500 dark:border-yellow-300">
              PENDING_VERIFICATION
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            System Admin
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1988-07-07
          </td>
        </tr>
        <!-- Row 4 -->
        <tr class="hover:bg-purple-100 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-12 w-12">
                <img class="h-12 w-12 rounded-none border-2 border-purple-400 dark:border-green-300 object-cover" src="https://randomuser.me/api/portraits/women/75.jpg" alt="User Avatar Zara Byte">
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 dark:text-white">Zara Byte</div>
                <div class="text-xs text-purple-700 dark:text-green-300">USER_ID: 404</div>
              </div>
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            [email protected]
            <div class="text-xs text-purple-600 dark:text-green-400">Idle</div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap border-r-2 border-purple-200 dark:border-green-700">
            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-none bg-gray-300 text-gray-800 dark:bg-gray-600 dark:text-gray-200 border-2 border-gray-500 dark:border-gray-400">
              SUSPENDED
            </span>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300 border-r-2 border-purple-200 dark:border-green-700">
            Data Analyst
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
            1995-01-23
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="mt-6 text-center text-xs text-purple-700 dark:text-green-400">
    SYSTEM ONLINE | ALL RECORDS CURRENT | END OF TRANSMISSION
  </div>
</div>
<!-- Component End -->

材料设计搜索框

一个受材料设计原则启发的搜索框组件，使用 Tailwind CSS 构建。它具有响应式行为，能够适应容器宽度，通过悬停和聚焦阴影过渡（深度效果）提供视觉反馈，并全面支持黑暗主题。该组件包括一个领先的搜索图标，并确保干净、现代的美学。仅使用 CSS 实现。由于其 `w-full` 特性，非常适合嵌入各种布局。为确保无障碍，确保将 `input` 元素与相应的 `<label>` 配对，或提供描述性的 `aria-label` 。

打开预览

                <!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
  <div class="pl-4 pr-2 py-3">
    <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input
    type="search"
    name="search_query"
    id="material_search_box_input"
    placeholder="Search..."
    aria-label="Search"
    class="
      appearance-none
      w-full h-12
      pl-0 pr-4 py-3
      text-base text-gray-900 dark:text-gray-100
      bg-transparent
      focus:outline-none
      placeholder-gray-500 dark:placeholder-gray-400
    "
  />
</div>
<!-- Component End -->

玻璃化媒体组件

一个响应式媒体卡组件，具有通过 Tailwind CSS 构建的 glassmorphism 设计（磨砂玻璃效果）。具有带有悬停显示播放图标的图像占位符（来自 picsum.photos）、文本内容、带有头像的作者部分（来自 randomuser.me）和作按钮。该组件使用 Tailwind CSS “dark：”变体支持深色模式，并且可以在各种屏幕尺寸上响应。不需要 JavaScript。为了获得最佳视觉效果，请将此组件放在对比鲜明的背景上。深色模式功能采用适当的 Tailwind CSS 配置（例如，tailwind.config.js中的 'darkMode： “class”' ）。

打开预览

                <div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
  <!-- Image -->
  <div class="relative">
    <img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
    <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
      <svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
    </div>
  </div>

  <!-- Content Area -->
  <div class="p-5 sm:p-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
      Glassmorphic Media Showcase
    </h2>
    <p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
      Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
    </p>

    <!-- Author/Meta Info -->
    <div class="flex items-center space-x-3 mt-4">
      <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
      <div>
        <p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
        <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-indigo-600 hover:bg-indigo-700 text-white 
                     dark:bg-indigo-500 dark:hover:bg-indigo-600 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        View Details
      </button>
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-white/50 hover:bg-white/70 text-slate-700 
                     dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200 
                     border border-white/60 dark:border-slate-600/60 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        Bookmark
      </button>
    </div>
  </div>
</div>

1 ... 312 313 314 315 316 ... 335