搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

Cyberpunk Crypto 仪表板布局

适用于加密货币和区块链应用程序的响应式赛博朋克主题仪表板布局，具有霓虹灯装饰、深色背景和柔和的颜色。包括侧边栏导航、主内容区域和顶部栏。

                <div class="min-h-screen bg-gray-950 text-gray-400 dark:bg-black dark:text-gray-500 overflow-hidden font-mono">
    <!-- Top Bar -->
    <header class="flex items-center justify-between px-6 py-4 bg-gray-900 border-b border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 relative z-20">
        <div class="flex items-center">
            <button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md lg:hidden" aria-label="Open sidebar menu">
                <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="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
            <h1 class="ml-4 text-2xl font-bold text-purple-400 dark:text-purple-600 tracking-wider hidden sm:block">BLOCKCHAIN NEXUS</h1>
        </div>
        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="Search circuits..." class="bg-gray-800 text-purple-300 dark:bg-gray-800 dark:text-purple-500 border border-purple-700/50 dark:border-purple-900/50 rounded-md py-2 px-4 focus:outline-none focus:ring-1 focus:ring-purple-500/70 text-sm hidden md:block">
                <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-purple-700" 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"></path>
                </svg>
            </div>
            <button class="text-purple-400 dark:text-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 rounded-md hidden sm:block" aria-label="Notifications">
                <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="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"></path>
                </svg>
            </button>
            <div class="w-9 h-9 rounded-full bg-purple-700/50 dark:bg-purple-900/50 flex items-center justify-center overflow-hidden cursor-pointer" aria-label="User avatar">
                <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
            </div>
        </div>
    </header>

    <div class="flex flex-col lg:flex-row relative z-10">
        <!-- Sidebar -->
        <aside class="fixed inset-y-0 left-0 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-gray-900 border-r border-purple-800/50 dark:bg-gray-950 dark:border-purple-900/50 z-20 w-64 pt-20 lg:pt-0">
            <nav class="mt-8 px-6 space-y-4">
                <a href="#" class="flex items-center text-purple-400 dark:text-purple-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200 bg-purple-900/20 dark:bg-purple-950/20 border border-purple-700/30 dark:border-purple-900/30 shadow-neon-sm">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                    </svg>
                    Dashboard
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    Wallets
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.0001 0 006.001 9.001H18L21 6m-3 0V4a2 2 0 00-2-2H6a2 2 0 00-2 2v2m10-2l2 2m-2-2l-2 2m0 0l-2 2m2-2h2M7 12h14m-7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                    </svg>
                    Transactions
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3 3 7-7M3 12a9 9 0 1118 0 9 9 0 01-18 0z"></path>
                    </svg>
                    Staking
                </a>
                <a href="#" class="flex items-center text-gray-400 dark:text-gray-600 hover:text-purple-300 dark:hover:text-purple-500 py-2 px-4 rounded-md transition-colors duration-200">
                    <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    Settings
                </a>
            </nav>
        </aside>

        <!-- Main Content Area -->
        <main class="flex-1 p-6 lg:ml-64 mt-16 lg:mt-0">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                <!-- Card 1 -->
                <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 to-transparent group-hover:from-purple-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <h2 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-2">Current Balance</h2>
                        <p class="text-4xl font-bold text-green-400 dark:text-green-600 mb-4">₿ 3.250</p>
                        <p class="text-sm text-gray-500 dark:text-gray-700">+ $15,200.00 <span class="text-green-500">(+2.5%)</span></p>
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-800/10 to-transparent group-hover:from-blue-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <h2 class="text-xl font-semibold text-blue-300 dark:text-blue-500 mb-2">Open Positions</h2>
                        <p class="text-4xl font-bold text-orange-400 dark:text-orange-600 mb-4">5</p>
                        <p class="text-sm text-gray-500 dark:text-gray-700">Last 24h: <span class="text-red-500">-1</span></p>
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6 relative group overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-red-800/10 to-transparent group-hover:from-red-800/20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-500"></div>
                    <div class="relative z-10">
                        <h2 class="text-xl font-semibold text-red-300 dark:text-red-500 mb-2">Total Transactions</h2>
                        <p class="text-4xl font-bold text-yellow-400 dark:text-yellow-600 mb-4">1,287</p>
                        <p class="text-sm text-gray-500 dark:text-gray-700">Avg. value: $50.00</p>
                    </div>
                </div>
            </div>

            <!-- Recent Activity Table -->
            <div class="bg-gray-800 border border-purple-700/40 dark:bg-gray-900 dark:border-purple-900/40 rounded-xl shadow-neon-md p-6">
                <h3 class="text-xl font-semibold text-purple-300 dark:text-purple-500 mb-4">Recent Cyber-Activity Log</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full leading-normal">
                        <thead>
                            <tr>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Type</th>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Amount</th>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Status</th>
                                <th class="px-5 py-3 border-b-2 border-purple-700/50 dark:border-purple-900/50 text-left text-xs font-semibold text-purple-400 dark:text-purple-600 uppercase tracking-wider">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-300 dark:text-gray-500">BTC Transfer</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-green-400 dark:text-green-600">+ 0.05 BTC</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                        <span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
                                        <span class="relative text-green-500 dark:text-green-400">Completed</span>
                                    </span>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 14:30</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-300 dark:text-gray-500">ETH Swap</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-orange-400 dark:text-orange-600">- 1.2 ETH</p>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <span class="relative inline-block px-3 py-1 font-semibold text-blue-900 leading-tight">
                                        <span aria-hidden="true" class="absolute inset-0 bg-blue-200 dark:bg-blue-800 opacity-50 rounded-full"></span>
                                        <span class="relative text-blue-500 dark:text-blue-400">Pending</span>
                                    </span>
                                </td>
                                <td class="px-5 py-4 border-b border-gray-700 dark:border-gray-800 text-sm">
                                    <p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-26 10:15</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <p class="text-gray-300 dark:text-gray-500">USDT Deposit</p>
                                </td>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <p class="text-green-400 dark:text-green-600">+ 500 USDT</p>
                                </td>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                        <span aria-hidden="true" class="absolute inset-0 bg-green-200 dark:bg-green-800 opacity-50 rounded-full"></span>
                                        <span class="relative text-green-500 dark:text-green-400">Completed</span>
                                    </span>
                                </td>
                                <td class="px-5 py-4 border-b-0 text-sm">
                                    <p class="text-gray-400 dark:text-gray-600 text-xs">2024-07-25 18:00</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- Background Grid/Pattern for Cyberpunk feel -->
    <div class="fixed inset-0 pointer-events-none z-0 opacity-10">
        <div class="absolute inset-0 [background-image:linear-gradient(to_right,rgba(139,92,246,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(139,92,246,0.1)_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:linear-gradient(to_right,rgba(124,58,237,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(124,58,237,0.1)_1px,transparent_1px)]"></div>
    </div>
</div>

<style>
    /* Custom Shadow for Neon Effect */
    .shadow-neon-md {
        box-shadow: 0 0px 10px rgba(139, 92, 246, 0.4), 0 0px 20px rgba(139, 92, 246, 0.2), inset 0 0 5px rgba(139, 92, 246, 0.2);
    }
    .dark .shadow-neon-md {
        box-shadow: 0 0px 10px rgba(124, 58, 237, 0.4), 0 0px 20px rgba(124, 58, 237, 0.2), inset 0 0 5px rgba(124, 58, 237, 0.2);
    }
    .shadow-neon-sm {
        box-shadow: 0 0px 5px rgba(139, 92, 246, 0.3), inset 0 0 3px rgba(139, 92, 246, 0.15);
    }
    .dark .shadow-neon-sm {
        box-shadow: 0 0px 5px rgba(124, 58, 237, 0.3), inset 0 0 3px rgba(124, 58, 237, 0.15);
    }

    /* Prevent scroll when sidebar is open on small screens */
    @media (max-width: 1023px) {
        body:has(.sidebar-open) {
            overflow: hidden;
        }
    }

    /* Simple JS for sidebar toggle (optional, for demonstration) */
    /* Remove if using a JS framework or pure HTML with :target etc. */
    document.addEventListener('DOMContentLoaded', () => {
        const sidebarButton = document.querySelector('header button');
        const sidebar = document.querySelector('aside');

        sidebarButton.addEventListener('click', () => {
            sidebar.classList.toggle('-translate-x-full');
            document.body.classList.toggle('sidebar-open');
        });

        // Close sidebar when clicking outside (on overlay) - requires an overlay div
        // Or just clicking anywhere outside for simplicity
        document.addEventListener('click', (event) => {
            if (!sidebar.contains(event.target) && !sidebarButton.contains(event.target) && !sidebar.classList.contains('-translate-x-full')) {
                sidebar.classList.add('-translate-x-full');
                document.body.classList.remove('sidebar-open');
            }
        });
    });
</style>

电商 Material Design 导航

一个复杂的响应式单色电子商务导航组件，其灵感来自 Material Design，具有搜索、购物车、用户资料和类别链接，并支持深色模式。

打开预览

                <header class="bg-white dark:bg-gray-900 shadow-md font-sans w-full">
  <div class="container mx-auto px-4 py-3 sm:py-4 flex flex-wrap items-center justify-between">
    <!-- Logo & Brand Name -->
    <a href="#" class="flex items-center text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
      <svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
        <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3.5 16.5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm7 0c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5zm-3.5-5c-.828 0-1.5-.672-1.5-1.5s.672-1.5 1.5-1.5 1.5.672 1.5 1.5-.672 1.5-1.5 1.5z"/>
      </svg>
      ShopHere
    </a>

    <!-- Search Bar (Desktop/Tablet) -->
    <div class="hidden md:flex flex-grow max-w-lg mx-4">
      <div class="relative w-full">
        <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <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>
      </div>
    </div>

    <!-- Right-aligned Icons (Profile, Cart, etc.) -->
    <div class="flex items-center space-x-4 sm:space-x-6">
      <!-- User Profile Dropdown -->
      <div class="relative group">
        <button class="flex items-center p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
          <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </button>
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">My Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Orders</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Wishlist</a>
          <hr class="my-1 border-gray-200 dark:border-gray-700">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Sign Out</a>
        </div>
      </div>

      <!-- Cart Icon -->
      <a href="#" class="relative p-2 rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full dark:bg-red-500 dark:text-white transform translate-x-1/2 -translate-y-1/2">3</span>
      </a>

      <!-- Mobile Menu Button -->
      <div class="md:hidden">
        <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
            <path id="mobile-menu-open-icon" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
            <path id="mobile-menu-close-icon" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Search Bar -->
    <div class="w-full mt-3 md:hidden">
      <div class="relative w-full">
        <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 shadow-sm">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <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>
      </div>
    </div>
  </div>

  <!-- Main Navigation Links -->
  <nav id="main-navigation" class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 h-0 hidden md:flex md:h-auto overflow-hidden transition-all duration-300 ease-linear-out md:overflow-visible" style="opacity: 0;">
    <div class="container mx-auto px-4 py-2">
      <ul class="flex flex-col md:flex-row md:justify-around lg:justify-center md:space-x-8 lg:space-x-12">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Home
          </a>
        </li>
        <li class="relative group">
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0 flex items-center">
            Categories
            <svg class="ml-1 h-4 w-4 transform group-hover:rotate-180 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20">
              <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>
          </a>
          <div class="absolute left-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-left">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Books</a>
          </div>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Deals
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            New Arrivals
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors duration-200 md:px-0 md:py-0">
            Contact
          </a>
        </li>
      </ul>
    </div>
  </nav>
</header>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mainNavigation = document.getElementById('main-navigation');
    const openIcon = document.getElementById('mobile-menu-open-icon');
    const closeIcon = document.getElementById('mobile-menu-close-icon');

    mobileMenuButton.addEventListener('click', () => {
      const isHidden = mainNavigation.classList.contains('hidden');
      if (isHidden) {
        mainNavigation.classList.remove('hidden');
        mainNavigation.style.height = mainNavigation.scrollHeight + 'px'; // Set height for smooth transition
        mainNavigation.style.opacity = '1';
        openIcon.classList.add('hidden');
        closeIcon.classList.remove('hidden');
      } else {
        mainNavigation.style.height = '0'; // Collapse height
        mainNavigation.style.opacity = '0';
        // Wait for transition to complete before hiding fully
        mainNavigation.addEventListener('transitionend', () => {
          if (mainNavigation.style.height === '0px') {
            mainNavigation.classList.add('hidden');
          }
        }, { once: true });
        openIcon.classList.remove('hidden');
        closeIcon.classList.add('hidden');
      }
    });

    // Handle window resize to collapse/show menu for desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 768) { // md breakpoint
        mainNavigation.classList.remove('hidden');
        mainNavigation.style.height = 'auto'; // Reset height for desktop
        mainNavigation.style.opacity = '1';
        openIcon.classList.remove('hidden'); // Ensure menu button is in 3-line state on desktop
        closeIcon.classList.add('hidden');
      } else {
        if (!mainNavigation.classList.contains('hidden')) {
            // If menu is open on mobile, collapse it when resizing to smaller than md
            mainNavigation.style.height = '0';
            mainNavigation.style.opacity = '0';
            mainNavigation.addEventListener('transitionend', () => {
              if (mainNavigation.style.height === '0px') {
                mainNavigation.classList.add('hidden');
              }
            }, { once: true });
            openIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
        }
      }
    });
  });
</script>

受纸张/印刷启发的政府导航

一个复杂的、受纸张/印刷品启发的导航组件，适用于政府/公共网站，具有棕褐色/棕色色调、响应能力和深色模式支持。它包括主要导航、搜索和“快速链接”或“服务”部分。

打开预览

                <header class="font-serif bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 text-stone-800 dark:text-stone-200 shadow-lg">
  <div class="container mx-auto px-4 py-4 md:py-6">
    <div class="flex flex-col md:flex-row items-center justify-between gap-4">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
        <svg class="w-10 h-10 text-amber-900 dark:text-amber-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93h7v7.93zM10.85 4.07c.18-.03.36-.07.55-.07s.37.04.55.07L12 2.05c-3.95-.49-7-3.85-7-7.93h7v7.93zM13 19.93V12h7c0 4.08-3.05 7.44-7 7.93zM13.15 4.07C13.33 4.04 13.5 4 13.68 4s.37.04.55.07L12 2.05c-3.95-.49-7-3.85-7-7.93h7v7.93zM22 12h-7c0-4.08 3.05-7.44 7-7.93v7.93z"></path>
        </svg>
        <span class="self-center text-3xl font-bold whitespace-nowrap text-amber-900 dark:text-amber-500">Gob.us</span>
      </a>

      <div class="flex items-center w-full md:w-auto mt-4 md:mt-0">
        <form class="flex w-full">
          <label for="default-search" class="mb-2 text-sm font-medium text-stone-900 sr-only dark:text-white">Search</label>
          <div class="relative w-full">
            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
              <svg class="w-4 h-4 text-stone-500 dark:text-stone-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
              </svg>
            </div>
            <input type="search" id="default-search" class="block w-full p-2.5 ps-10 text-sm text-stone-900 border border-stone-300 rounded-lg bg-stone-50 focus:ring-amber-500 focus:border-amber-500 dark:bg-stone-800 dark:border-stone-700 dark:placeholder-stone-400 dark:text-white dark:focus:ring-amber-500 dark:focus:border-amber-500" placeholder="Search services, forms, news..." required>
            <button type="submit" class="text-white absolute end-2.5 bottom-2 bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:outline-none focus:ring-amber-300 font-medium rounded-lg text-sm px-4 py-1.5 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-800">Search</button>
          </div>
        </form>
      </div>
    </div>

    <nav class="mt-6 bg-amber-200 dark:bg-stone-800 p-3 rounded-lg shadow-inner border-t-2 border-l-2 border-stone-300 dark:border-stone-700">
      <ul class="flex flex-wrap justify-center md:justify-start gap-x-6 gap-y-3 text-lg font-semibold text-amber-900 dark:text-amber-200">
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">Home</a></li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">About Us</a></li>
        <li>
          <div class="relative group">
            <button class="flex items-center hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent group-hover:border-amber-700 dark:group-hover:border-amber-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 rounded-sm">
              Services
              <svg class="w-4 h-4 ml-1" 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="M19 9l-7 7-7-7"></path></svg>
            </button>
            <div class="absolute left-0 mt-2 w-48 bg-stone-50 dark:bg-stone-700 border border-stone-200 dark:border-stone-600 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition duration-300 z-10">
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Online Forms</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Permits & Licenses</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Tax Information</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Public Records</a>
            </div>
          </div>
        </li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">News & Events</a></li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

User Profiles 组件

一个简单、响应迅速的用户配置文件组件，具有水彩/艺术风格和渐变彩虹配色方案，适用于市场平台。包括深色模式支持。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 relative group">
    <!-- Artistic Top Shape -->
    <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-r from-red-400 via-yellow-400 to-green-400 dark:from-red-700 dark:via-yellow-700 dark:to-green-700 opacity-70 clip-path-polygon-alt rounded-t-3xl">
      <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <filter id="watercolor-effect">
            <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5" result="noise"/>
            <feDiffuseLighting in="noise" lightingColor="white" surfaceScale="2" result="diffuse"/>
            <feBlend in="SourceGraphic" in2="diffuse" mode="multiply"/>
          </filter>
        </defs>
        <rect width="100" height="100" fill="#FFF" filter="url(#watercolor-effect)" opacity="0.1"/>
      </svg>
    </div>

    <div class="relative p-6 pt-20 text-center">
      <!-- Profile Picture -->
      <div class="w-32 h-32 mx-auto rounded-full border-4 border-white dark:border-gray-700 overflow-hidden shadow-lg transform -translate-y-1/2 group-hover:scale-110 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-full h-full object-cover">
      </div>

      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white -mt-8 mb-2 leading-tight">
        Anya Petrova
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300 font-medium mb-4">
        Digital Artist & Illustrator
      </p>

      <div class="max-w-xs mx-auto mb-6 text-gray-700 dark:text-gray-400 text-sm leading-relaxed">
        Creating vibrant worlds through watercolors and digital strokes for a unique artistic experience.
      </div>

      <div class="flex justify-center flex-wrap gap-3 mb-6">
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-blue-400 to-indigo-400 text-white shadow-md
                     hover:from-blue-500 hover:to-indigo-500 transition duration-200">
          Watercolor
        </span>
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-green-400 to-teal-400 text-white shadow-md
                     hover:from-green-500 hover:to-teal-500 transition duration-200">
          Illustrations
        </span>
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-purple-400 to-pink-400 text-white shadow-md
                     hover:from-purple-500 hover:to-pink-500 transition duration-200">
          Portraits
        </span>
      </div>

      <a href="#" class="inline-block px-8 py-3 rounded-full text-lg font-bold
                 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white shadow-lg
                 hover:shadow-xl hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600
                 transform hover:-translate-y-0.5 transition duration-300 ease-in-out
                 focus:outline-none focus:ring-4 focus:ring-purple-300 focus:ring-opacity-75 dark:focus:ring-purple-700">
        View Gallery
      </a>
    </div>

    <!-- Artistic Bottom Shape -->
    <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-l from-orange-400 via-yellow-400 to-red-400 dark:from-orange-700 dark:via-yellow-700 dark:to-red-700 opacity-60 clip-path-polygon-alt-bottom rounded-b-3xl">
      <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect width="100" height="100" fill="#FFF" filter="url(#watercolor-effect)" opacity="0.1"/>
      </svg>
    </div>
  </div>
</div>

<style>
  /* This is an additional style block for custom clip-path properties, 
     as Tailwind currently doesn't support complex clip-path values directly 
     via utility classes without custom configuration. 
     In a real project, this would likely be in a global CSS file or configured 
     via Tailwind's theme extends. */
  .clip-path-polygon-alt {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 85%, 50% 70%, 25% 85%, 0 70%);
  }
  .clip-path-polygon-alt-bottom {
    clip-path: polygon(0% 30%, 25% 15%, 50% 30%, 75% 15%, 100% 30%, 100% 100%, 0% 100%);
  }
</style>

跳至内容链接组件

一个用于 CRM/业务工具的简单、单色、受自然启发的“跳到内容”链接组件，通过深色模式支持确保可访问性和响应能力。

打开预览

                <div class="relative min-h-[100px] flex items-center justify-center bg-emerald-50 dark:bg-emerald-950 p-4 overflow-hidden rounded-lg shadow-inner sm:p-6 lg:p-8">
  <!-- Background elements mimicking organic flow -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute -top-10 -left-10 w-48 h-48 bg-emerald-200 dark:bg-emerald-700 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
    <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-emerald-300 dark:bg-emerald-600 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-emerald-100 dark:bg-emerald-800 opacity-30 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
  </div>

  <a href="#main-content" class="
      sr-only focus:not-sr-only 
      absolute top-4 left-4 z-50 
      px-6 py-3 
      bg-emerald-500 hover:bg-emerald-600 focus:bg-emerald-600
      dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:bg-emerald-700
      text-white dark:text-emerald-50
      text-lg font-semibold 
      rounded-full 
      shadow-lg hover:shadow-xl focus:shadow-xl
      transition-all duration-300 ease-in-out 
      transform hover:scale-105 focus:scale-105
      border-2 border-emerald-400 dark:border-emerald-500
      outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800 focus:ring-opacity-75
  ">
    Skip to Main Content
  </a>

  <!-- Main content area to skip to -->
  <div id="main-content" tabindex="-1" class="relative z-10 p-8 m-auto bg-emerald-100 dark:bg-emerald-900 rounded-lg shadow-xl text-center max-w-sm sm:max-w-md lg:max-w-lg">
    <h2 class="text-2xl sm:text-3xl font-bold text-emerald-800 dark:text-emerald-100 mb-4 tracking-tight">Welcome to Our CRM</h2>
    <p class="text-emerald-700 dark:text-emerald-200 text-sm sm:text-base leading-relaxed">
      This is the main content area. Using the 'Skip to Main Content' link allows users to bypass repetitive navigation elements and jump directly here.
    </p>
    <img src="https://picsum.photos/400/200?random=1" alt="Placeholder image for main content" class="w-full h-auto rounded-lg mt-6 shadow-md border border-emerald-200 dark:border-emerald-800">
  </div>

  <!-- Custom animation keyframes for organic blob effect -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }
    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
  </style>
</div>

渐变/颜色过渡灰度仪表板导航栏

仪表板的复杂响应式导航栏，具有灰度配色方案中的渐变过渡。包括多个交互元素和完整的深色模式支持。

打开预览

                <nav class="bg-white shadow-lg transition-colors duration-300 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
  <div class="mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-2xl font-bold bg-gradient-to-r from-gray-700 to-black text-transparent bg-clip-text dark:from-gray-300 dark:to-gray-100 dark:bg-opacity-75 transition-all duration-300">Dashboard</a>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Overview</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Analytics</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Reports</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Settings</a>
          </div>
        </div>
      </div>

      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200">
            <span class="absolute -inset-1.5"></span>
            <span class="sr-only">View notifications</span>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.8-3.003V12m0 8.25v-1.5m0-1.5V12m0 0a2.25 2.25 0 00-2.25 2.25V18a2.25 2.25 0 002.25 2.25h.75m0-4.5h-.75m-.75 0h-.75m-3.93-1.071c.42-.872 1.05-1.56 1.79-2.07c.74-.51 1.57-.79 2.44-.79h.75m0 0v-2.25m0 2.25h.75m0 0c.974 0 1.905-.275 2.722-.764m0 0A6.5 6.5 0 0012 2.25 6.5 6.5 0 006 8.25c0 1.62-.516 3.12-1.39 4.34m0 0L4.5 14.25m15 0a.75.75 0 00.75-.75L21 12.75l-.75-1.5a.75.75 0 00-.75-.75H3.75a.75.75 0 00-.75.75L3 12.75l.75 1.5a.75.75 0 00.75.75h15z" />
            </svg>
          </button>

          <div class="relative ml-3 group">
            <button type="button" class="relative flex max-w-xs items-center rounded-full bg-white dark:bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="absolute -inset-1.5"></span>
              <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="User Avatar">
            </button>
            <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-gray-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
            </div>
          </div>

          <!-- Dark Mode Toggle (Conceptual - requires JS for functionality) -->
          <button type="button" class="ml-4 p-1 rounded-full text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-800 dark:focus:ring-gray-400 transition-colors duration-200" aria-label="Toggle dark mode">
            <svg class="h-6 w-6 dark:hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-1.033 0-2.049-.154-3-.443m-4.321 4.75A9.704 9.704 0 0012 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M21 12.75a9.704 9.704 0 01-3 .443m-4.321 4.75a9.704 9.704 0 01-3-.443" />
              <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-fill="none" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5l9 9M7.5 16.5l9-9" />
            </svg>
            <svg class="h-6 w-6 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-1.033 0-2.049-.154-3-.443m-4.321 4.75A9.704 9.704 0 0012 21.75c1.033 0 2.049-.154 3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M2.25 12A9.704 9.704 0 015.25 11.25c1.033 0 2.049.154 3 .443m4.321-4.75a9.704 9.704 0 013-.443m4.321-4.75a9.704 9.704 0 013-.443m-4.321-4.75a9.704 9.704 0 01-3-.443M21 12.75a9.704 9.704 0 01-3 .443m-4.321 4.75a9.704 9.704 0 01-3-.443" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18M3 12h18A9.704 9.704 0 0112 2.25c-1.033 0-2.049.154-3 .443M21.75 3.75v16.5A.75.75 0 0121 21.75H3a.75.75 0 01-.75-.75V3.75a.75.75 0 01.75-.75h18z" />
            </svg>
          </button>
        </div>
      </div>

      <div class="-mr-2 flex md:hidden">
        <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-400 transition-colors duration-200" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Overview</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Analytics</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Reports</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">Settings</a>
    </div>
    <div class="border-t border-gray-200 pb-3 pt-4 dark: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="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-gray-800 dark:text-gray-200">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-white dark:focus:ring-offset-gray-700 dark:focus:ring-gray-400 transition-colors duration-200">
          <span class="absolute -inset-1.5"></span>
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.8-3.003V12m0 8.25v-1.5m0-1.5V12m0 0a2.25 2.25 0 00-2.25 2.25V18a2.25 2.25 0 002.25 2.25h.75m0-4.5h-.75m-.75 0h-.75m-3.93-1.071c.42-.872 1.05-1.56 1.79-2.07c.74-.51 1.57-.79 2.44-.79h.75m0 0v-2.25m0 2.25h.75m0 0c.974 0 1.905-.275 2.722-.764m0 0A6.5 6.5 0 0012 2.25 6.5 6.5 0 006 8.25c0 1.62-.516 3.12-1.39 4.34m0 0L4.5 14.25m15 0a.75.75 0 00.75-.75L21 12.75l-.75-1.5a.75.75 0 00-.75-.75H3.75a.75.75 0 00-.75.75L3 12.75l.75 1.5a.75.75 0 00.75.75h15z" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white transition-colors duration-200">Sign out</a>
      </div>
    </div>
  </div>
</nav>

添加到购物车按钮组件

一个复杂的拟物化“添加到购物车”按钮组件，专为游戏界面设计，具有相似的配色方案和完全响应能力，并支持深色模式。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="max-w-md w-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_4px_8px_rgba(255,255,255,0.4),inset_0_-4px_8px_rgba(0,0,0,0.2),0_10px_20px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_4px_8px_rgba(255,255,255,0.1),inset_0_-4px_8px_rgba(0,0,0,0.5),0_10px_20px_rgba(0,0,0,0.5)] p-6 sm:p-8 border-t border-l border-gray-100 dark:border-gray-600">
    <div class="flex flex-col sm:flex-row items-center sm:items-start gap-6 mb-8">
      <div class="w-32 h-32 flex-shrink-0 rounded-2xl overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800">
        <img src="https://picsum.photos/id/11/300/300" alt="Game Cover" class="w-full h-full object-cover" />
      </div>
      <div class="flex-grow text-center sm:text-left">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 leading-tight drop-shadow-sm">
          Cyberpunk Vanguard
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
          Ultimate Edition 2077
        </p>
        <span class="text-3xl sm:text-4xl font-bold text-green-700 dark:text-green-400 drop-shadow-md">
          $59.99
        </span>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
      <div class="bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-4 rounded-xl shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_2px_4px_rgba(255,255,255,0.5)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),0_2px_4px_rgba(0,0,0,0.5)] border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <h3 class="text-md font-semibold text-gray-700 dark:text-gray-200 mb-1">Platform</h3>
        <p class="text-lg font-bold text-gray-900 dark:text-gray-50">PC</p>
        <div class="absolute -top-4 -right-4 w-12 h-12 bg-blue-400 group-hover:bg-blue-500 rounded-full blur-md opacity-20 transition-all duration-300"></div>
      </div>
      <div class="bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-4 rounded-xl shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_2px_4px_rgba(255,255,255,0.5)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),0_2px_4px_rgba(0,0,0,0.5)] border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <h3 class="text-md font-semibold text-gray-700 dark:text-gray-200 mb-1">Release Date</h3>
        <p class="text-lg font-bold text-gray-900 dark:text-gray-50">12/10/2077</p>
        <div class="absolute -bottom-4 -left-4 w-12 h-12 bg-purple-400 group-hover:bg-purple-500 rounded-full blur-md opacity-20 transition-all duration-300"></div>
      </div>
    </div>

    <div class="relative flex items-center justify-center p-2 rounded-2xl bg-gradient-to-br from-yellow-300 to-orange-400 dark:from-yellow-600 dark:to-orange-700 
                shadow-[inset_0_2px_4px_rgba(255,200,0,0.8),inset_0_-2px_4px_rgba(100,50,0,0.6),0_6px_12px_rgba(0,0,0,0.4)] dark:shadow-[inset_0_2px_4px_rgba(255,200,0,0.2),inset_0_-2px_4px_rgba(50,25,0,0.4),0_6px_12px_rgba(0,0,0,0.6)] group">
      
      <!-- Inner Bevel/Highlight -->
      <div class="absolute inset-0 rounded-2xl border-2 border-yellow-200 dark:border-yellow-700 opacity-80 group-hover:opacity-100 transition-opacity duration-200"></div>

      <!-- Main Button Content -->
      <button class="relative z-10 w-full px-6 py-4 flex items-center justify-center gap-3 
                     font-extrabold text-white text-xl sm:text-2xl tracking-wide uppercase 
                     bg-gradient-to-br from-orange-500 to-yellow-600 dark:from-orange-800 dark:to-yellow-900 
                     rounded-xl shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(255,255,255,0.4)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.5),inset_0_2px_4px_rgba(255,255,255,0.1)] 
                     transform active:scale-[0.98] transition-all duration-150 
                     cursor-pointer outline-none focus:outline-none 
                     ring-4 ring-yellow-400 dark:ring-yellow-600 ring-offset-4 ring-offset-orange-300 dark:ring-offset-orange-800 
                     hover:from-orange-600 hover:to-yellow-700 dark:hover:from-orange-900 dark:hover:to-yellow-950 
                     text-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md animate-pulse" fill="currentColor" viewBox="0 0 24 24">
          <path d="M20.71,7.04A2.083,2.083,0,0,0,19.23,6.72L17.7,5.2A2.083,2.083,0,0,0,16.17,4.88L14.7,6.34,17.66,9.3ZM12.04,7.72,3.32,16.44a.439.439,0,0,0-.11.23L2,21.68a.448.448,0,0,0,.54.54l5.01-1.21a.439.439,0,0,0,.23-.11L16.28,11.96Z" />
          <path d="M17.66,9.3,14.7,6.34,12.04,7.72,14.9,10.6 Z" class="fill-current text-white"/>
          <path d="M20,11a1,1,0,0,0-1,1v6a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V5A1,1,0,0,1,4,4H10a1,1,0,0,0,0-2H4A3,3,0,0,0,1,5V18a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3V12A1,1,0,0,0,20,11Z" />
        </svg>
        <span>Add to Cart</span>
      </button>

      <!-- Subtle background glow -->
      <div class="absolute inset-[10%] rounded-full bg-yellow-300 dark:hidden opacity-30 blur-xl group-hover:opacity-50 transition-opacity duration-300"></div>
      <div class="absolute inset-[10%] rounded-full bg-yellow-800 hidden dark:block opacity-30 blur-xl group-hover:opacity-50 transition-opacity duration-300"></div>

      <!-- Corner light flares -->
      <div class="absolute top-0 left-0 w-8 h-8 rounded-full bg-white opacity-20 blur-md group-hover:opacity-40 transition-opacity duration-300"></div>
      <div class="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-orange-200 opacity-20 blur-md group-hover:opacity-40 transition-opacity duration-300"></div>
    </div>
  </div>
</div>

Activity Feed 组件

具有包豪斯风格设计的响应式活动源组件，具有黑色和白色单色带，带有原色强调，适用于技术/SaaS 应用程序。包括深色模式支持。

打开预览

                <div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 min-h-screen">

  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    
    <div class="bg-black dark:bg-gray-950 p-4 sm:p-5 flex items-center justify-between border-b-4 border-red-500">
      <h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider text-white">Activity Feed</h2>
      <button class="p-2 rounded-full text-white hover:bg-white hover:text-black focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <div class="p-4 sm:p-6 space-y-6 sm:space-y-8">

      <!-- Activity Item 1 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0 animate-pulse">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span> changed the status of <span class="font-medium text-gray-700 dark:text-gray-300">Task #1234</span>
            <time datetime="2023-10-27T14:30:00Z" class="ml-2 text-xs">2 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
            <p class="text-gray-700 dark:text-gray-300 font-bold mb-1">Status Update:</p>
            <p class="text-gray-600 dark:text-gray-400">From <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">In Progress</span> to <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Completed</span></p>
          </div>
        </div>
      </div>
      
      <!-- Activity Item 2 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span> added 3 new files to <span class="font-medium text-gray-700 dark:text-gray-300">Project Alpha</span>
            <time datetime="2023-10-27T13:00:00Z" class="ml-2 text-xs">3 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
            <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>design_mockup_v2.png</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>requirements.pdf</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>project_plan.xlsx</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Robert Brown</span> commented on <span class="font-medium text-gray-700 dark:text-gray-300">Bug Report #567</span>
            <time datetime="2023-10-27T10:15:00Z" class="ml-2 text-xs">6 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
            <p class="text-gray-700 dark:text-gray-300">"I've replicated the bug on Firefox 118. It seems to be related to the new authentication flow. Investigating a fix now."</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 4 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span> invited <span class="font-medium text-gray-700 dark:text-gray-300">David Green</span> to the team
            <time datetime="2023-10-27T09:00:00Z" class="ml-2 text-xs">8 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
            <div class="flex items-center space-x-3">
              <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Invited User Avatar">
              <div>
                <p class="text-gray-700 dark:text-gray-300 font-medium">David Green</p>
                <p class="text-gray-600 dark:text-gray-400 text-xs">[email protected]</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="bg-gray-50 dark:bg-gray-700 p-4 sm:p-5 border-t border-gray-200 dark:border-gray-600 flex justify-center">
      <button class="px-6 py-2 bg-red-500 text-white font-semibold rounded-md shadow-md hover:bg-black dark:hover:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out uppercase tracking-wide text-sm">
        Load More
      </button>
    </div>

  </div>
</div>

Memphis_Notifications_Component

一个简单的响应式通知组件，具有孟菲斯设计的影响，使用温暖的中性色，适用于非营利/慈善网站。包括深色模式支持。

打开预览

                <div class="p-4 sm:p-6 md:p-8 bg-beige-50 dark:bg-gray-800 font-sans min-h-screen">
  <div class="max-w-md mx-auto relative rounded-lg overflow-hidden border-2 border-gray-300 dark:border-gray-700 shadow-lg">

    <!-- Memphis Design Elements (BG) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute top-4 left-4 w-12 h-12 bg-cream-500 rounded-full"></div>
      <div class="absolute bottom-20 -right-6 w-24 h-16 bg-warm-gray-300 transform -rotate-12"></div>
      <div class="absolute top-1/3 -left-8 w-20 h-10 bg-beige-700 transform rotate-45"></div>
      <div class="absolute bottom-4 right-4 w-8 h-8 bg-cream-700 rounded-lg"></div>
      <div class="absolute top-1/2 left-1/4 w-16 h-16 rounded-full border-4 border-warm-gray-400"></div>
    </div>

    <div class="relative z-10 bg-white dark:bg-gray-900 rounded-lg p-6 sm:p-8 flex flex-col space-y-4">
      <h2 class="text-2xl sm:text-3xl font-bold text-beige-800 dark:text-cream-300 mb-4 text-center">
        Your Updates
      </h2>

      <!-- Notification Item 1 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">Sarah J. just <span class="text-beige-900 dark:text-cream-200">donated $50</span> to your 'Clean Water Initiative'.</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in animate-delay-100">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">New message from <span class="text-beige-900 dark:text-cream-200">Volunteer Coordinator</span>.</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">Yesterday at 10:30 AM</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in animate-delay-200">
        <img src="https://picsum.photos/id/1005/50/50" alt="Campaign icon" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600 object-cover">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">'Education for All' campaign reached <span class="text-beige-900 dark:text-cream-200">75% of its goal</span>!</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">3 days ago</p>
        </div>
      </div>

      <div class="text-center mt-6">
        <a href="#" class="inline-block px-6 py-3 rounded-full bg-beige-900 text-white dark:bg-cream-600 dark:text-beige-900 font-bold text-lg hover:bg-beige-700 dark:hover:bg-cream-700 transition-colors duration-300 transform hover:scale-105 shadow-md">
          View All
        </a>
      </div>
    </div>
  </div>

  <!-- Custom Tailwind Colors (for demonstration, normally in tailwind.config.js) -->
  <style>
    .bg-beige-50 { background-color: #fcfbf8; }
    .bg-beige-100 { background-color: #f7f5f0; }
    .border-beige-200 { border-color: #edebe4; }
    .border-beige-300 { border-color: #e2e0dc; }
    .text-beige-700 { color: #8e8a7d; }
    .text-beige-800 { color: #6d6a61; }
    .text-beige-900 { color: #4b4840; }
    
    .bg-cream-500 { background-color: #e6b26d; } /* Primary Accent */
    .bg-cream-600 { background-color: #d19f5a; }
    .bg-cream-700 { background-color: #b28549; }
    .dark\:text-cream-200 { color: #fdf2e1; }
    .dark\:text-cream-300 { color: #fbebd0; }
    .dark\:text-cream-400 { color: #f5dfba; }
    
    .bg-warm-gray-300 { background-color: #d3d0c9; }
    .border-warm-gray-400 { border-color: #b6b3ac; }

    /* Simple fade-in animation example */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fade-in 0.5s ease-out forwards;
      opacity: 0;
    }
    .animate-delay-100 { animation-delay: 0.1s; }
    .animate-delay-200 { animation-delay: 0.2s; }
  </style>
</div>

会话超时警报组件

一个简单、响应迅速的会话超时警报组件，具有多色渐变背景，专为活动和会议网站而设计。包括深色模式支持。

打开预览

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-75">
  <div class="relative w-full max-w-sm p-0 rounded-2xl shadow-xl overflow-hidden
              bg-gradient-to-br from-purple-500 via-pink-500 to-red-500
              dark:from-purple-700 dark:via-pink-700 dark:to-red-700">
    <div class="p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-xl m-0.5">
      <div class="flex flex-col items-center justify-center text-center">
        <svg class="w-16 h-16 mb-4 text-red-500 dark:text-red-400" 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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white mb-2">
          Session Expired
        </h3>
        <p class="text-gray-600 dark:text-gray-300 text-base mb-6">
          Your session has timed out due to inactivity. Please log in again to continue.
        </p>
        <div class="w-full flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="w-full px-6 py-3 rounded-full text-white font-semibold transition-all duration-300 transform
                         bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600
                         shadow-lg hover:shadow-xl dark:shadow-none">
            Log In Now
          </button>
          <button class="w-full px-6 py-3 rounded-full font-semibold transition-all duration-300 transform
                         bg-gray-100 text-gray-800 hover:bg-gray-200
                         dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600
                         shadow-md hover:shadow-lg dark:shadow-none">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 76 77 78 79 80 ... 335