搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

标记云组件

一个响应式标签云组件，具有等宽/开发人员设计、霓虹灯/电色方案和深色模式支持，适用于娱乐/媒体平台。

                <div class="font-mono bg-gray-950 text-gray-100 min-h-screen p-4 sm:p-8 dark:bg-black">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-12 text-neon-blue dark:text-neon-pink drop-shadow-neon-blue dark:drop-shadow-neon-pink transition-colors duration-300">
      <span class="block">/tag_cloud$</span>
      <span class="block">_explore_topics_</span>
    </h2>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6">
      <!-- Tag Item -->
      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-green/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-green group-hover:text-neon-blue dark:text-neon-pink dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Action)</h3>
          <p class="text-gray-400 text-sm mb-4">> 125,432 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#SciFi</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Thriller</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <!-- Repeat Tag Item for other categories -->
       <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-blue dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-pink">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-neon-pink dark:text-neon-green dark:group-hover:text-neon-blue transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Comedy)</h3>
          <p class="text-gray-400 text-sm mb-4">> 98,123 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Standup</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Skit</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-green">
        <div class="absolute inset-0 bg-gradient-to-br from-lime-green/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-lime-green group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Drama)</h3>
          <p class="text-gray-400 text-sm mb-4">> 76,890 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Romance</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Historical</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-lime-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-pink dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-pink/20 to-lime-green/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-pink group-hover:text-lime-green dark:text-neon-blue dark:group-hover:text-neon-pink transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Fantasy)</h3>
          <p class="text-gray-400 text-sm mb-4">> 54,321 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Magic</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Adventure</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-pink text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-lime-green">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-neon-green/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-neon-green dark:text-neon-pink dark:group-hover:text-lime-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Horror)</h3>
          <p class="text-gray-400 text-sm mb-4">> 32,109 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Slasher</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Supernatural</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-pink">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-green/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-green group-hover:text-neon-pink dark:text-neon-blue dark:group-hover:text-neon-pink transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Animation)</h3>
          <p class="text-gray-400 text-sm mb-4">> 43,210 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Anime</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-green/30 group-hover:border-neon-green dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#CGI</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-blue dark:border-gray-800 dark:bg-gray-950 dark:hover:border-lime-green">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-lime-green/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-lime-green dark:text-neon-green dark:group-hover:text-lime-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Documentary)</h3>
          <p class="text-gray-400 text-sm mb-4">> 21,987 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Science</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-lime-green/30 dark:group-hover:border-lime-green transition-colors duration-300">#Nature</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-pink dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-pink/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-pink group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-blue transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Music)</h3>
          <p class="text-gray-400 text-sm mb-4">> 87,654 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Pop</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Rock</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-pink text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-green">
        <div class="absolute inset-0 bg-gradient-to-br from-lime-green/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-lime-green group-hover:text-neon-pink dark:text-neon-blue dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Kids)</h3>
          <p class="text-gray-400 text-sm mb-4">> 65,432 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Educational</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Cartoon</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-lime-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-blue dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-pink">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-blue/20 to-neon-pink/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-blue group-hover:text-neon-pink dark:text-lime-green dark:group-hover:text-neon-pink transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Science Fiction)</h3>
          <p class="text-gray-400 text-sm mb-4">> 78,901 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Space</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-blue/30 group-hover:border-neon-blue dark:bg-gray-800 dark:group-hover:bg-neon-pink/30 dark:group-hover:border-neon-pink transition-colors duration-300">#Future</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-blue text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-lime-green dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-green">
        <div class="absolute inset-0 bg-gradient-to-br from-lime-green/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-lime-green group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-green transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Thriller)</h3>
          <p class="text-gray-400 text-sm mb-4">> 90,123 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Mystery</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-lime-green/30 group-hover:border-lime-green dark:bg-gray-800 dark:group-hover:bg-neon-green/30 dark:group-hover:border-neon-green transition-colors duration-300">#Suspense</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-lime-green text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div class="group relative overflow-hidden rounded-lg border border-gray-700 bg-gray-900 shadow-lg transition-all duration-300 hover:scale-105 hover:border-neon-pink dark:border-gray-800 dark:bg-gray-950 dark:hover:border-neon-blue">
        <div class="absolute inset-0 bg-gradient-to-br from-neon-pink/20 to-neon-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-4 sm:p-6 text-center">
          <h3 class="text-lg sm:text-xl font-semibold text-neon-pink group-hover:text-neon-blue dark:text-lime-green dark:group-hover:text-neon-blue transition-colors duration-300 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">(Sport)</h3>
          <p class="text-gray-400 text-sm mb-4">> 45,678 items</p>
          <div class="flex justify-center flex-wrap gap-2 text-xs">
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Football</span>
            <span class="inline-block px-2 py-1 rounded-full bg-gray-800 text-gray-400 border border-gray-700 group-hover:bg-neon-pink/30 group-hover:border-neon-pink dark:bg-gray-800 dark:group-hover:bg-neon-blue/30 dark:group-hover:border-neon-blue transition-colors duration-300">#Racing</span>
          </div>
        </div>
        <div class="absolute bottom-0 right-0 p-2 text-neon-pink text-opacity-0 group-hover:text-opacity-100 transition-all duration-300">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

    </div>
  </div>

  <style>
    /* This is often added in a global CSS file or via a build step for custom colors */
    .text-neon-blue {
        color: #00e5ff;
    }
    .drop-shadow-neon-blue {
        filter: drop-shadow(0 0 5px #00e5ff) drop-shadow(0 0 15px #00e5ff);
    }
    .border-neon-blue {
        border-color: #00e5ff;
    }
    .bg-neon-blue\/30 {
        background-color: rgba(0, 229, 255, 0.3);
    }

    .text-neon-pink {
        color: #ff00ea;
    }
    .drop-shadow-neon-pink {
        filter: drop-shadow(0 0 5px #ff00ea) drop-shadow(0 0 15px #ff00ea);
    }
    .border-neon-pink {
        border-color: #ff00ea;
    }
    .bg-neon-pink\/30 {
        background-color: rgba(255, 0, 234, 0.3);
    }

    .text-lime-green {
        color: #76ff03;
    }
    .border-lime-green {
        border-color: #76ff03;
    }
    .bg-lime-green\/30 {
        background-color: rgba(118, 255, 3, 0.3);
    }

    /* Dark mode specific overrides for colors */
    .dark .text-neon-blue {
        color: #00e5ff; /* Keep blue bright in dark mode */
    }
    .dark .drop-shadow-neon-blue {
        filter: drop-shadow(0 0 5px #00e5ff) drop-shadow(0 0 15px #00e5ff);
    }
    .dark .border-neon-blue {
        border-color: #00e5ff;
    }

    .dark .text-neon-pink {
        color: #ff00ea; /* Keep pink bright in dark mode */
    }
    .dark .drop-shadow-neon-pink {
        filter: drop-shadow(0 0 5px #ff00ea) drop-shadow(0 0 15px #ff00ea);
    }
    .dark .border-neon-pink {
        border-color: #ff00ea;
    }

    .dark .text-lime-green {
        color: #76ff03;
    }
    .dark .border-lime-green {
        border-color: #76ff03;
    }
  </style>
</div>

侧边栏导航组件 - Memphis Muted

一个复杂的响应式侧边栏导航组件，其灵感来自 Memphis 设计，具有柔和的配色方案，适用于文档和 Wiki 站点。包括深色模式支持和交互元素。

打开预览

                <div class="flex h-screen bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Mobile Menu Button (Hamburger) -->
  <button id="mobile-sidebar-toggle" class="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-700 bg-gray-200 dark:text-gray-200 dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors duration-300 md:top-6 md:left-6 md:p-3">
    <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>

  <!-- Sidebar -->
  <aside id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full lg:relative lg:translate-x-0 transition-transform duration-300 ease-in-out z-40 w-64 md:w-72 lg:w-80 overflow-y-auto bg-fuchsia-100 dark:bg-fuchsia-900 border-r-4 border-fuchsia-300 dark:border-fuchsia-700 shadow-xl lg:shadow-none">
    <div class="p-6 md:p-8 lg:p-10 border-b-4 border-fuchsia-300 dark:border-fuchsia-700 mb-6 relative">
      <h1 class="text-2xl md:text-3xl font-extrabold text-fuchsia-800 dark:text-fuchsia-100 uppercase tracking-wide relative z-10">
        <span class="relative">
          <span class="block absolute -bottom-1 -left-1 w-6 h-6 bg-amber-400 dark:bg-amber-600 rounded-bl-lg transform rotate-45"></span>
          <span class="relative">Doc</span>
        </span>
        <span class="relative ml-2">
          <span class="block absolute -top-1 -right-1 w-6 h-6 bg-lime-400 dark:bg-lime-600 rounded-tr-lg transform -rotate-45"></span>
          <span class="relative">Hub</span>
        </span>
      </h1>
      <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute top-0 left-1/2 -ml-8 w-16 h-16 bg-fuchsia-400 dark:bg-fuchsia-600 opacity-20 transform -rotate-30"></div>
        <div class="absolute bottom-0 right-1/4 w-10 h-10 bg-indigo-400 dark:bg-indigo-600 opacity-20 transform rotate-45"></div>
      </div>
    </div>

    <!-- Search Bar -->
    <div class="px-6 mb-6">
      <div class="relative">
        <input type="text" placeholder="Search documentation..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700 border-b-4 border-lime-300 dark:border-lime-700 transition-all duration-300">
        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500 dark: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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="px-6 pb-6 space-y-4 md:space-y-6 lg:space-y-8">
      <!-- Category 1 -->
      <div>
        <h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-300 mb-4 px-3 relative">
          <span class="relative z-10">Getting Started</span>
          <span class="block absolute left-0 bottom-0 w-full h-1 bg-amber-200 dark:bg-amber-800 z-0 transform -skew-x-12"></span>
        </h2>
        <ul class="space-y-2">
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-amber-200 hover:text-amber-800 dark:hover:bg-amber-800 dark:hover:text-amber-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              <span class="relative z-10">Introduction</span>
              <span class="absolute inset-0 bg-gradient-to-r from-amber-100 to-amber-50 dark:from-amber-900 dark:to-amber-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-amber-200 hover:text-amber-800 dark:hover:bg-amber-800 dark:hover:text-amber-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-amber-500 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6a3 3 0 01-3-3V6zm4 6a1 1 0 110 2h3a1 1 0 110-2H7zm0-4a1 1 0 110 2h3a1 1 0 110-2H7z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">Installation Guide</span>
              <span class="absolute inset-0 bg-gradient-to-r from-amber-100 to-amber-50 dark:from-amber-900 dark:to-amber-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Category 2 -->
      <div>
        <h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-lime-600 dark:text-lime-300 mb-4 px-3 relative mt-6 md:mt-8">
          <span class="relative z-10">Core Concepts</span>
          <span class="block absolute left-0 bottom-0 w-full h-1 bg-lime-200 dark:bg-lime-800 z-0 transform -skew-x-12"></span>
        </h2>
        <ul class="space-y-2">
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h.01a1 1 0 100-2H10zm3 0a1 1 0 000 2h.01a1 1 0 100-2H13zm-3 4a1 1 0 000 2h.01a1 1 0 100-2H10z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">Architecture Overview</span>
              <span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
              <span class="relative z-10">Data Models</span>
              <span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-lime-200 hover:text-lime-800 dark:hover:bg-lime-800 dark:hover:text-lime-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-lime-500 dark:text-lime-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">API Endpoints</span>
              <span class="absolute inset-0 bg-gradient-to-r from-lime-100 to-lime-50 dark:from-lime-900 dark:to-lime-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Category 3 -->
      <div>
        <h2 class="text-xs md:text-sm font-semibold uppercase tracking-wider text-indigo-600 dark:text-indigo-300 mb-4 px-3 relative mt-6 md:mt-8">
          <span class="relative z-10">Advanced Topics</span>
          <span class="block absolute left-0 bottom-0 w-full h-1 bg-indigo-200 dark:bg-indigo-800 z-0 transform -skew-x-12"></span>
        </h2>
        <ul class="space-y-2">
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-indigo-200 hover:text-indigo-800 dark:hover:bg-indigo-800 dark:hover:text-indigo-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v6a1 1 0 102 0V3zM14 3a1 1 0 00-2 0v6a1 1 0 102 0V3zM17 6a1 1 0 00-2 0v6a1 1 0 102 0V6zM4 9a1 1 0 00-2 0v6a1 1 0 102 0V9z"></path></svg>
              <span class="relative z-10">Performance Tuning</span>
              <span class="absolute inset-0 bg-gradient-to-r from-indigo-100 to-indigo-50 dark:from-indigo-900 dark:to-indigo-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-800 dark:text-gray-100 hover:bg-indigo-200 hover:text-indigo-800 dark:hover:bg-indigo-800 dark:hover:text-indigo-100 transition-all duration-200 transform hover:translate-x-1 relative overflow-hidden group">
              <svg class="w-5 h-5 mr-3 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 17a4.5 4.5 0 01-1.44-8.834 5 5 0 018.303-7.682 4.5 4.5 0 011.453 8.834L18 18.5a1 1 0 01-1.707.707L15.243 17H5.5z" clip-rule="evenodd"></path></svg>
              <span class="relative z-10">Security Best Practices</span>
              <span class="absolute inset-0 bg-gradient-to-r from-indigo-100 to-indigo-50 dark:from-indigo-900 dark:to-indigo-950 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- User Profile / Footer - Memphis Inspired -->
    <div class="mt-auto p-6 md:p-8 border-t-4 border-fuchsia-300 dark:border-fuchsia-700 relative">
      <div class="flex items-center space-x-4">
        <img class="w-12 h-12 rounded-full ring-4 ring-indigo-400 dark:ring-indigo-600 transition-all duration-300 transform hover:scale-105" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar">
        <div>
          <p class="text-gray-800 dark:text-gray-100 font-semibold">Jane Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Editor</p>
        </div>
      </div>
      <div class="mt-4 flex justify-between items-center">
        <a href="#" class="text-fuchsia-700 dark:text-fuchsia-300 hover:text-fuchsia-900 dark:hover:text-fuchsia-100 text-sm font-medium transition-colors duration-200">
          Settings
          <span class="inline-block w-2 h-2 ml-1 bg-lime-400 dark:bg-lime-600 rounded-full transform rotate-45"></span>
        </a>
        <button class="p-2 rounded-full bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 hover:bg-amber-300 dark:hover:bg-amber-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10 0a1 1 0 00-1 1v4a1 1 0 102 0V4a1 1 0 00-1-1zM16 3a1 1 0 00-1 1v8a1 1 0 102 0V4a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
      <div class="absolute -bottom-4 right-0 w-16 h-1 bg-indigo-400 dark:bg-indigo-600 transform skew-x-30 origin-right"></div>
    </div>

  </aside>

  <!-- Main Content Area (for demonstration, not part of the component itself) -->
  <main class="flex-1 p-8 lg:p-10 transition-all duration-300">
    <h2 class="text-4xl font-extrabold text-fuchsia-700 dark:text-fuchsia-200 mb-6">Welcome to the Documentation</h2>
    <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
      This is a placeholder for your main content. The sidebar navigation on the left provides quick access to different sections and topics.
      The design incorporates a muted Memphis style with geometric shapes and bold accents.
    </p>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-fuchsia-50 dark:bg-fuchsia-950 p-6 rounded-xl shadow-md border-2 border-fuchsia-200 dark:border-fuchsia-800 relative overflow-hidden">
        <h3 class="text-2xl font-bold text-amber-700 dark:text-amber-300 mb-3">Guides</h3>
        <p class="text-gray-700 dark:text-gray-300">Detailed instructions and tutorials to get you started and beyond.</p>
        <span class="absolute -top-4 -right-4 w-12 h-12 bg-amber-300 dark:bg-amber-700 rounded-full opacity-60 transform rotate-12"></span>
      </div>
      <div class="bg-fuchsia-50 dark:bg-fuchsia-950 p-6 rounded-xl shadow-md border-2 border-fuchsia-200 dark:border-fuchsia-800 relative overflow-hidden">
        <h3 class="text-2xl font-bold text-lime-700 dark:text-lime-300 mb-3">API Reference</h3>
        <p class="text-gray-700 dark:text-gray-300">Comprehensive documentation for all available API endpoints and models.</p>
        <span class="absolute -bottom-4 -left-4 w-12 h-12 bg-lime-300 dark:bg-lime-700 rounded-full opacity-60 transform -rotate-12"></span>
      </div>
    </div>
  </main>

</div>

<script>
  // Basic JavaScript for mobile sidebar toggle
  document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.getElementById('sidebar');
    const toggleButton = document.getElementById('mobile-sidebar-toggle');

    toggleButton.addEventListener('click', function() {
      sidebar.classList.toggle('-translate-x-full');
    });

    // Close sidebar if clicking outside on mobile
    document.addEventListener('click', function(event) {
      if (!sidebar.contains(event.target) && !toggleButton.contains(event.target) && window.innerWidth < 1024) {
        sidebar.classList.add('-translate-x-full');
      }
    });

    // Close sidebar on resize if it's open on mobile and becomes desktop
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 1024 && sidebar.classList.contains('-translate-x-full')) {
        sidebar.classList.remove('-translate-x-full');
      }
    });
  });

  // Dark mode toggle (example - you'd likely have a dedicated button/
  // This is just to demonstrate dark mode styling
  /*
  document.documentElement.classList.add('dark');
  // Or to remove:
  // document.documentElement.classList.remove('dark');
  */
</script>

Sports_Fitness_Charts_Component

一个复杂的响应式图表组件，适用于运动和健身应用程序，采用干净、极简的瑞士排版设计，具有黑白底色和单一强调色。包括深色模式支持和基于网格的布局，用于各种数据可视化。

打开预览

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 sm:mb-10 lg:mb-12 border-b pb-4 sm:pb-6 border-accent dark:border-dark-accent">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-gray-50 tracking-tight leading-tight mb-2 sm:mb-0">Performance Overview</h1>
    <div class="flex items-center space-x-2">
      <button class="px-4 py-2 text-sm sm:text-base font-semibold rounded-full bg-accent text-white hover:bg-opacity-90 transition-colors duration-200 ease-in-out shadow-sm">
        Weekly
      </button>
      <button class="px-4 py-2 text-sm sm:text-base font-medium rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        Monthly
      </button>
      <button class="px-4 py-2 text-sm sm:text-base font-medium rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        Yearly
      </button>
    </div>
  </div>

  <!-- Main Grid Layout -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- Chart 1: Activity Tracker - Large -->
    <div class="col-span-1 md:col-span-2 lg:col-span-2 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Activity Tracker</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Your weekly progress at a glance.</p>
      <div class="h-64 sm:h-80 md:h-96 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Line/Area Chart</span>
        <img src="https://picsum.photos/800/400?grayscale&random=1" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-6 text-center">
        <div>
          <p class="text-2xl font-bold text-accent dark:text-dark-accent">12k</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Steps Today</p>
        </div>
        <div>
          <p class="text-2xl font-bold">560</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Calories Burned</p>
        </div>
        <div>
          <p class="text-2xl font-bold relative inline-flex items-baseline">
            7.2<span class="text-base font-normal ml-0.5">km</span>
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Distance Covered</p>
        </div>
        <div>
          <p class="text-2xl font-bold relative inline-flex items-baseline">
            85<span class="text-base font-normal ml-0.5">bpm</span>
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Avg. Heart Rate</p>
        </div>
      </div>
    </div>

    <!-- Chart 2: Performance Goals - Medium -->
    <div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Performance Goals</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Track your progress towards set goals.</p>
      <div class="h-56 sm:h-64 md:h-60 lg:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Radar/Bar Chart</span>
        <img src="https://picsum.photos/400/300?grayscale&random=2" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="mt-6 space-y-4">
        <div class="flex justify-between items-center text-sm">
          <span class="text-gray-700 dark:text-gray-300">Strength Training</span>
          <span class="font-semibold text-accent dark:text-dark-accent">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
          <div class="bg-accent dark:bg-dark-accent h-2.5 rounded-full" style="width: 75%"></div>
        </div>
        <div class="flex justify-between items-center text-sm">
          <span class="text-gray-700 dark:text-gray-300">Cardio Endurance</span>
          <span class="font-semibold text-accent dark:text-dark-accent">90%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
          <div class="bg-accent dark:bg-dark-accent h-2.5 rounded-full" style="width: 90%"></div>
        </div>
      </div>
    </div>

    <!-- Chart 3: Sleep Quality - Small -->
    <div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Sleep Quality</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Rest is key to recovery.</p>
      <div class="h-56 sm:h-64 md:h-60 lg:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Pie/Donut Chart</span>
        <img src="https://picsum.photos/400/300?grayscale&random=3" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="mt-6 text-center">
        <p class="text-4xl font-bold text-accent dark:text-dark-accent">7.5<span class="text-xl font-normal ml-1">hrs</span></p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Average Sleep Last Night</p>
        <ul class="mt-4 text-sm text-gray-700 dark:text-gray-300 space-y-2">
          <li class="flex justify-between items-center">
            <span>Deep Sleep:</span>
            <span class="font-semibold">2.1 hrs</span>
          </li>
          <li class="flex justify-between items-center">
            <span>REM Sleep:</span>
            <span class="font-semibold">1.8 hrs</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Light Sleep:</span>
            <span class="font-semibold">3.6 hrs</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Chart 4: Team Stats (if applicable) - Large horizontal -->
    <div class="col-span-1 md:col-span-2 lg:col-span-3 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Team Performance (Last 5 Games)</h2>
      <p class="text-sm text-gray-60:0 dark:text-gray-400 mb-6">A quick look at team's recent form.</p>
      <div class="h-56 sm:h-64 md:h-72 w-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden animate-pulse relative">
        <span class="text-gray-500 dark:text-gray-400 text-sm italic">Placeholder for Bar/Stacked Bar Chart</span>
        <img src="https://picsum.photos/1000/400?grayscale&random=4" alt="Placeholder Chart" class="absolute inset-0 w-full h-full object-cover opacity-30 blur-sm">
      </div>
      <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 text-center">
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 1</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">L</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 2</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 3</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-accent dark:text-dark-accent">W</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 4</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-md">
          <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">L</p>
          <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Game 5</p>
        </div>
      </div>
    </div>

    <!-- Chart 5: Individual Records / Leaderboard -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Individual Leaderboard</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Top performers this week.</p>
      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="flex items-center py-3" aria-label="Leaderboard Rank 1">
          <span class="text-lg font-bold text-accent dark:text-dark-accent w-8">1.</span>
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-accent dark:border-dark-accent" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">15,200 Steps</p>
          </div>
          <p class="text-lg font-bold text-gray-900 dark:text-gray-100">+150</p>
        </li>
        <li class="flex items-center py-3" aria-label="Leaderboard Rank 2">
          <span class="text-lg font-bold text-gray-700 dark:text-gray-300 w-8">2.</span>
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Player Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">14,800 Steps</p>
          </div>
          <p class="text-lg font-bold text-gray-900 dark:text-gray-100">+120</p>
        </li>
        <li class="flex items-center py-3" aria-label="Leaderboard Rank 3">
          <span class="text-lg font-bold text-gray-700 dark:text-gray-300 w-8">3.</span>
          <img class="w-10 h-10 rounded-full mr-4 object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Player Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Mike Johnson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">13,500 Steps</p>
          </div>
          <p class="text-lg font-bold text-gray-900 dark:text-gray-100">+100</p>
        </li>
      </ul>
      <button class="mt-6 w-full text-center px-4 py-3 text-sm sm:text-base font-semibold rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        View All Rankings
      </button>
    </div>

    <!-- Chart 6: Hydration Tracker -->
    <div class="col-span-1 bg-gray-50 dark:bg-gray-850 p-6 sm:p-8 rounded-lg shadow-lg border border-gray-100 dark:border-gray-800 flex flex-col justify-between">
      <div>
        <h2 class="text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Hydration Tracker</h2>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Stay hydrated for peak performance.</p>
        <div class="relative flex items-center justify-center">
          <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-5xl font-extrabold text-accent dark:text-dark-accent relative overflow-hidden">
            <span class="z-10">75%</span>
            <div class="absolute bottom-0 w-full bg-blue-400 dark:bg-blue-600 transition-all duration-500 ease-out" style="height: 75%;"></div>
          </div>
        </div>
        <p class="text-center mt-6 text-2xl font-bold text-gray-900 dark:text-gray-100">2.25L</p>
        <p class="text-center text-sm text-gray-600 dark:text-gray-400">of 3L Daily Goal</p>
      </div>
      <button class="mt-6 w-full text-center px-4 py-3 text-sm sm:text-base font-semibold rounded-lg bg-accent text-white hover:bg-opacity-90 transition-colors duration-200 ease-in-out shadow-sm">
        Log Water Intake
      </button>
    </div>

  </div>

  <!-- Footer/Disclaimer -->
  <div class="mt-12 text-center text-xs text-gray-500 dark:text-gray-400">
    <p>Disclaimer: Data shown is for illustrative purposes only and may not reflect real-time information.</p>
    <p class="mt-1">&copy; 2023 Fitness App. All rights reserved.</p>
  </div>

</div>

<style>
  /* Define CSS Variables for the accent color */
  :root {
    --accent-color: #EF4444; /* Tailwind red-500 */
    --dark-accent-color: #DC2626; /* Tailwind red-600 for dark mode, slightly darker */
  }
  .bg-accent {
    background-color: var(--accent-color);
  }
  .text-accent {
    color: var(--accent-color);
  }
  .border-accent {
    border-color: var(--accent-color);
  }

  .dark .bg-dark-accent {
    background-color: var(--dark-accent-color);
  }
  .dark .text-dark-accent {
    color: var(--dark-accent-color);
  }
  .dark .border-dark-accent {
    border-color: var(--dark-accent-color);
  }

  /* Dark mode background for subtle variation */
  .dark .bg-gray-850 {
    background-color: #1a202c; /* Slightly lighter than gray-900 but darker than gray-800 */
  }
</style>

会话超时警报组件

一个复杂的响应式会话超时警报组件，适用于政府/公共服务网站，采用有机/自然灵感设计和酷炫的中性色。包括倒数计时器、扩展或注销选项以及完整的深色模式支持。

打开预览

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-gray-900/80 backdrop-blur-sm">
  <div class="relative w-full max-w-md p-8 overflow-hidden bg-white rounded-3xl shadow-2xl dark:bg-gray-800 transform transition-all duration-300 ease-out sm:p-10 lg:p-12 animate-fade-in-up">
    <div class="absolute inset-0 z-0 flex items-center justify-center pointer-events-none opacity-5 dark:opacity-10">
      <svg class="w-full h-full text-blue-300 dark:text-blue-600 animate-pulse-slow" viewBox="0 0 200 200" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M100 0C44.77 0 0 44.77 0 100s44.77 100 100 100 100-44.77 100-100S155.23 0 100 0zm0 10c49.71 0 90 40.29 90 90s-40.29 90-90 90-90-40.29-90-90S50.29 10 100 10zm-50 40c-2.76 0-5 2.24-5 5S47.14 60 50 60s5-2.24 5-5-2.24-5-5-5zm100 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM50 150c-2.76 0-5 2.24-5 5S47.14 160 50 160s5-2.24 5-5-2.24-5-5-5zm100 0c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM100 50c-2.76 0-5 2.24-5 5S97.14 60 100 60s5-2.24 5-5-2.24-5-5-5zM100 150c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM40 100c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM160 100c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z"></path>
      </svg>
    </div>

    <div class="relative z-10 text-center">
      <div class="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-blue-100 rounded-full dark:bg-blue-600/20">
        <svg class="w-8 h-8 text-blue-600 dark:text-blue-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <h3 class="mb-4 text-2xl font-bold text-gray-800 dark:text-gray-100 sm:text-3xl lg:text-4xl">
        Session Expiring Soon
      </h3>
      <p class="mb-6 text-base text-gray-600 dark:text-gray-300 sm:text-lg">
        For your security, your session will expire in <strong class="text-blue-600 dark:text-blue-400 font-extrabold text-xl">1:59</strong>.
      </p>

      <div class="w-32 h-32 mx-auto mb-8 flex items-center justify-center rounded-full bg-blue-50 dark:bg-blue-600/10 text-blue-700 dark:text-blue-300 border-4 border-blue-200 dark:border-blue-700 shadow-inner overflow-hidden animate-scale-bounce">
        <span class="text-5xl font-extrabold leading-none" id="countdown-timer">1:59</span>
      </div>

      <div class="flex flex-col gap-4 sm:flex-row sm:justify-center">
        <button type="button" class="flex-1 px-6 py-3 text-lg font-semibold text-white bg-blue-600 rounded-full shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-200 ease-in-out hover:scale-105 active:scale-95 animate-fade-in">
          <span class="relative flex items-center justify-center">
            <svg class="w-5 h-5 mr-2 -ml-1 animate-spin" 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 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2M16 16v2m-6 0h6m-6 0h6"></path>
            </svg>
            Extend Session
          </span>
        </button>
        <button type="button" class="flex-1 px-6 py-3 text-lg font-semibold text-gray-800 bg-gray-200 rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-100 dark:hover:bg-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 transition transform duration-200 ease-in-out hover:scale-105 active:scale-95 animate-fade-in delay-100">
          Log Out Now
        </button>
      </div>

      <p class="mt-8 text-sm text-gray-500 dark:text-gray-400">
        Questions? Please contact <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">support</a>.
      </p>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scale-bounce {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  @keyframes pulse-slow {
    0%, 100% {
      opacity: 0.05;
    }
    50% {
      opacity: 0.15;
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .animate-scale-bounce {
    animation: scale-bounce 2s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-fade-in {
    animation: fade-in-up 0.6s ease-out forwards;
    animation-delay: 0.2s;
  }

  .animate-fade-in.delay-100 {
    animation-delay: 0.3s;
  }
</style>

会话超时警报组件

响应式会话超时告警组件，采用多色渐变彩虹设计，适用于政府和公共服务网站。具有暗模式支持和平滑过渡。

打开预览

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gradient-to-br from-blue-500/20 via-purple-500/20 to-pink-500/20 backdrop-blur-sm dark:from-gray-900/50 dark:via-gray-800/50 dark:to-gray-700/50" aria-labelledby="session-timeout-title" role="dialog" aria-modal="true">
  <div class="w-full max-w-md p-6 bg-white rounded-xl shadow-2xl relative overflow-hidden transform transition-all sm:my-8 sm:w-full sm:max-w-lg
              dark:bg-gray-800 dark:border dark:border-gray-700">
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-30">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-gradient-to-br from-red-400 to-yellow-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:from-red-600 dark:to-yellow-600"></div>
      <div class="absolute -bottom-8 -right-8 w-60 h-60 bg-gradient-to-br from-green-400 to-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:from-green-600 dark:to-blue-600"></div>
      <div class="absolute top-1/4 -right-20 w-52 h-52 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:from-purple-600 dark:to-pink-600"></div>
    </div>

    <div class="relative z-10 text-center">
      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 p-1 mb-4 sm:mb-6">
        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.353 1.94 3.353h12.126c1.766 0 2.806-1.853 1.94-3.353L12.94 3.376c-.866-1.5-3.032-1.5-3.898 0L2.697 16.376zM12 15.75h.007v.008H12v-.008z" />
        </svg>
      </div>
      <h3 class="text-xl sm:text-2xl font-extrabold leading-6 text-gray-900 transition-colors duration-300 dark:text-gray-100 mb-2" id="session-timeout-title">
        Your Session is About to Expire!
      </h3>
      <div class="mt-2 text-base text-gray-700 dark:text-gray-300 transition-colors duration-300">
        <p>For your security, your session will automatically end in <span class="font-bold text-lg text-red-600 dark:text-red-400">1:45</span>.</p>
        <p class="mt-2">Please save any unsaved work.</p>
      </div>
      <div class="mt-5 sm:mt-6 flex flex-col sm:flex-row-reverse sm:space-x-reverse sm:space-x-4 space-y-3 sm:space-y-0">
        <button type="button" class="inline-flex w-full justify-center rounded-md border border-transparent bg-gradient-to-r from-teal-500 to-cyan-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm
                      dark:focus:ring-offset-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
          Extend Session
        </button>
        <button type="button" class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm
                      dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 transition-colors duration-300">
          Log out now
        </button>
      </div>
    </div>
  </div>
</div>

<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;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

User Mentions 组件

一个复杂的、响应式的用户提及组件，用于活动/会议网站，具有包豪斯风格的设计，具有柔和/不饱和的颜色和深色模式支持。它允许用户搜索和选择要提及的联系人。

打开预览

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

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-750">

    <!-- Header -->
    <div class="bg-gray-200 dark:bg-gray-800 p-4 sm:p-6 border-b border-gray-300 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold tracking-tight text-gray-800 dark:text-gray-100">Mention Participants</h2>
      <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-md p-1 -m-1">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>

    <!-- Search Input -->
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-750">
      <div class="relative">
        <input type="text" placeholder="Search by name or email..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
      </div>
    </div>

    <!-- Selected Mentions Area -->
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-750 bg-gray-50 dark:bg-gray-800 min-h-16 flex flex-wrap items-center gap-2">
      <span class="text-sm text-gray-600 dark:text-gray-400 italic" role="status">No participants selected yet.</span>
      <!-- Example selected user (will be dynamically added/removed) -->
      <div class="inline-flex items-center bg-blue-100 dark:bg-blue-800 rounded-full py-1 pl-3 pr-2 text-sm font-medium text-blue-800 dark:text-blue-100 group transition-all duration-200 ease-in-out transform hover:scale-105">
        <img class="w-6 h-6 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
        John Doe
        <button class="ml-1 p-0.5 rounded-full hover:bg-blue-200 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-blue-800 transition-colors duration-200" aria-label="Remove John Doe">
          <svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>
      <div class="inline-flex items-center bg-purple-100 dark:bg-purple-800 rounded-full py-1 pl-3 pr-2 text-sm font-medium text-purple-800 dark:text-purple-100 group transition-all duration-200 ease-in-out transform hover:scale-105">
        <img class="w-6 h-6 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
        Jane Smith
        <button class="ml-1 p-0.5 rounded-full hover:bg-purple-200 dark:hover:bg-purple-700 text-purple-600 dark:text-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-100 dark:focus:ring-offset-purple-800 transition-colors duration-200" aria-label="Remove Jane Smith">
          <svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>
    </div>

    <!-- Participant List -->
    <div class="max-h-96 overflow-y-auto divide-y divide-gray-200 dark:divide-gray-750">

      <!-- Participant Item -->
      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar of Alicia Brown">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Alicia Brown</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Frontend Developer</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <!-- Participant Item (Selected State) -->
      <div class="flex items-center justify-between p-4 sm:p-6 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-600">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
          <div class="ml-4">
            <p class="font-semibold text-blue-800 dark:text-blue-100">John Doe</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">[email protected]</p>
            <p class="text-xs text-blue-500 dark:text-blue-400">Project Manager</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-blue-400 dark:border-blue-600 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900" title="Deselect John Doe">
          Selected
        </button>
      </div>

      <!-- More Participants (for scroll demonstration) -->
      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">UI/UX Designer</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar of Robert Johnson">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Data Scientist</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar of Emily White">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Event Coordinator</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

      <div class="flex items-center justify-between p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar of Michael Green">
          <div class="ml-4">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Michael Green</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">[email protected]</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Marketing Specialist</p>
          </div>
        </div>
        <button class="px-3 py-1 text-sm rounded-md border border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 hover:border-blue-400 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200">
          Select
        </button>
      </div>

    </div>

    <!-- Footer Buttons -->
    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 flex justify-end gap-3 border-t border-gray-200 dark:border-gray-750">
      <button type="button" class="px-4 py-2 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Cancel
      </button>
      <button type="button" class="px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition-colors duration-200">
        Add Mentions
      </button>
    </div>

  </div>

</div>

错误消息组件 - CRM/业务工具

专为 CRM/Business Tools 设计的复杂响应式错误消息组件，具有干净、简约的瑞士/国际排版风格，具有鲜艳的色彩和深色模式支持。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center font-sans tracking-tight">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] hover:shadow-2xl">
    <div class="px-6 py-5 sm:px-8 sm:py-6 bg-red-600 dark:bg-red-700 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
        <h2 class="text-3xl font-extrabold text-white leading-tight">Error Occurred!</h2>
      </div>
      <button type="button" class="text-white opacity-75 hover:opacity-100 transition-opacity duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-600 focus:ring-white rounded-full p-1">
        <span class="sr-only">Close alert</span>
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <div class="p-6 sm:p-8">
      <div class="space-y-6">
        <p class="text-gray-700 dark:text-gray-300 text-lg sm:text-xl leading-relaxed">
          We're sorry, an unexpected error has prevented us from completing your request. This issue has been logged and our team is investigating.
        </p>
        
        <div class="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-md shadow-inner">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-6 w-6 text-red-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-8V7a1 1 0 112 0v3a1 1 0 11-2 0zm0 4a1 1 0 102 0 1 1 0 00-2 0z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3 flex-1">
              <h3 class="text-lg font-bold text-red-800 dark:text-red-300">Detailed Error Information:</h3>
              <div class="mt-2 text-sm text-red-700 dark:text-red-400 leading-tight space-y-1">
                <p><strong class="font-medium">Error Code:</strong> <span class="font-mono text-gray-900 dark:text-gray-100">CRM-TRANSACTION-FATAL-001</span></p>
                <p><strong class="font-medium">Timestamp:</strong> <span class="font-mono text-gray-900 dark:text-gray-100">2023-10-27T10:30:45Z</span></p>
                <p><strong class="font-medium">Request ID:</strong> <span class="font-mono text-gray-900 dark:text-gray-100">req_aBcDeF123GHIJklMN456</span></p>
              </div>
            </div>
          </div>
        </div>

        <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg leading-relaxed">
          Please try again in a few moments. If the problem persists, please contact our support team and provide them with the Request ID mentioned above.
        </p>

        <div class="border-t border-gray-200 dark:border-gray-700 pt-4 sm:pt-6">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Common Solutions:</h3>
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 text-base">
            <li class="flex items-start">
              <div class="text-red-500 flex-shrink-0 mr-2">•</div>
              <span>Check your internet connection and try reloading the page.</span>
            </li>
            <li class="flex items-start">
              <div class="text-red-500 flex-shrink-0 mr-2">•</div>
              <span>Clear your browser's cache and cookies.</span>
            </li>
            <li class="flex items-start">
              <div class="text-red-500 flex-shrink-0 mr-2">•</div>
              <span>Ensure you are using an up-to-date modern web browser.</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="px-6 py-4 sm:px-8 sm:py-5 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700 flex flex-col sm:flex-row justify-end sm:items-center space-y-3 sm:space-y-0 sm:space-x-3">
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" /></svg>
        <span>Go Back</span>
      </a>
      <button type="button" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-bold rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.247a1 1 0 011.004-.008L14.773 12l-5.54 2.761a1 1 0 01-1.004-.008 1 1 0 01-.424-1.109L7.5 12l-1.004-2.761a1 1 0 01.428-1.109zM15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
        <span>Contact Support</span>
      </button>
    </div>
  </div>
</div>

登录表单组件

一个简单、响应式的登录表单组件，具有赛博朋克美学和柔和的霓虹灯装饰，专为时尚/美容品牌设计。包括深色模式支持。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-black p-4 flex items-center justify-center dark:from-black dark:via-gray-950 dark:to-indigo-950">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-lg relative overflow-hidden transform transition-all duration-300 hover:scale-105
              bg-gray-800 border-2 border-fuchsia-500
              dark:bg-gray-900 dark:border-indigo-600">
    
    <!-- Cyberpunk Glitchy Border Effect (Pseudo-elements or multiple layers for complex effects) -->
    <div class="absolute inset-0 border-2 border-fuchsia-700 opacity-20 animate-pulse-slow pointer-events-none rounded-lg dark:border-indigo-800"></div>

    <h2 class="text-3xl font-extrabold text-center mb-6 
               text-fuchsia-400 drop-shadow-[0_0_5px_rgba(232,121,249,0.7)]
               dark:text-indigo-400 dark:drop-shadow-[0_0_5px_rgba(129,140,248,0.7)]">
      LOG<span class="text-pink-300">//</span>IN
    </h2>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium 
                                  text-fuchsia-200 dark:text-indigo-200
                                  mb-1">
          User//ID
        </label>
        <input type="email" id="email" name="email" required
               class="mt-1 block w-full px-4 py-2 rounded-md 
                      bg-gray-700 text-fuchsia-100 placeholder-pink-200
                      border border-fuchsia-500 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent
                      dark:bg-gray-800 dark:text-indigo-100 dark:placeholder-blue-200
                      dark:border-indigo-600 dark:focus:ring-indigo-400">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium 
                                     text-fuchsia-200 dark:text-indigo-200
                                     mb-1">
          Pass//KEY
        </label>
        <input type="password" id="password" name="password" required
               class="mt-1 block w-full px-4 py-2 rounded-md
                      bg-gray-700 text-fuchsia-100 placeholder-pink-200
                      border border-fuchsia-500 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent
                      dark:bg-gray-800 dark:text-indigo-100 dark:placeholder-blue-200
                      dark:border-indigo-600 dark:focus:ring-indigo-400">
      </div>

      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center">
          <input id="remember_me" name="remember_me" type="checkbox"
                 class="h-4 w-4 text-fuchsia-500 rounded border-gray-600
                        focus:ring-fuchsia-400
                        dark:text-indigo-500 dark:border-gray-700 dark:focus:ring-indigo-400">
          <label for="remember_me" class="ml-2 
                                        text-fuchsia-200 dark:text-indigo-200">
            REMEMBER//ME
          </label>
        </div>
        <a href="#" class="font-medium 
                           text-fuchsia-400 hover:text-fuchsia-300 drop-shadow-[0_0_3px_rgba(232,121,249,0.5)] 
                           dark:text-indigo-400 dark:hover:text-indigo-300 dark:drop-shadow-[0_0_3px_rgba(129,140,248,0.5)]">
          FORGET//PASS?
        </a>
      </div>

      <button type="submit"
              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-base font-medium 
                     bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white 
                     hover:from-fuchsia-500 hover:to-purple-500
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-400
                     transform transition duration-150 ease-in-out glow-on-hover
                     dark:from-indigo-600 dark:to-blue-600 dark:hover:from-indigo-500 dark:hover:to-blue-500
                     dark:focus:ring-indigo-400">
        ACCESS//SYSTEM
      </button>
    </form>

    <p class="mt-6 text-center text-sm 
              text-fuchsia-300 dark:text-indigo-300">
      Don't have an ACCOUNT//?
      <a href="#" class="font-medium 
                         text-fuchsia-400 hover:text-fuchsia-300 drop-shadow-[0_0_3px_rgba(232,121,249,0.5)]
                         dark:text-indigo-400 dark:hover:text-indigo-300 dark:drop-shadow-[0_0_3px_rgba(129,140,248,0.5)]">
        SIGN//UP
      </a>
    </p>
  </div>
</div>

<style>
/* Basic keyframes for a subtle glow/pulse effect. 
   In a real project, this might be in a CSS file or more advanced using JS. */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s infinite ease-in-out;
}

.glow-on-hover {
  /* Tailwind's shadow/ring usually handle this, but adding a custom glow for more cyberpunk feel */
  box-shadow: 0 0 10px rgba(232, 121, 249, 0.4);
  transition: box-shadow 0.2s ease-in-out;
}
.dark .glow-on-hover {
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
}
.glow-on-hover:hover {
  box-shadow: 0 0 15px rgba(232, 121, 249, 0.7);
}
.dark .glow-on-hover:hover {
  box-shadow: 0 0 15px rgba(129, 140, 248, 0.7);
}
</style>

信息图表组件

用于市场平台的简单信息图组件，具有引人入胜的悬停效果。使用紫色/紫色配色方案，并支持深色模式。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 rounded-lg shadow-xl">
  <h2 class="text-center text-2xl sm:text-3xl font-extrabold text-purple-900 dark:text-purple-200 mb-6 sm:mb-8">Marketplace Highlights</h2>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Stat Card 1 -->
    <div class="group relative overflow-hidden bg-white dark:bg-gray-850 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <div class="p-6 sm:p-7 flex flex-col items-center text-center">
        <div class="text-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 text-5xl sm:text-6xl font-extrabold mb-3 transition-colors duration-300">
          500K+
        </div>
        <p class="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">Active Users</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Growing daily with new sign-ups.</p>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-transparent to-purple-600 opacity-0 group-hover:opacity-10 dark:to-purple-800 transition-opacity duration-300"></div>
    </div>

    <!-- Stat Card 2 -->
    <div class="group relative overflow-hidden bg-white dark:bg-gray-850 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <div class="p-6 sm:p-7 flex flex-col items-center text-center">
        <div class="text-gradient-to-r from-indigo-600 to-violet-600 dark:from-indigo-400 dark:to-violet-400 text-5xl sm:text-6xl font-extrabold mb-3 transition-colors duration-300">
          10K+
        </div>
        <p class="text-lg font-semibold text-indigo-800 dark:text-indigo-200 mb-2">Verified Vendors</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Carefully vetted for quality and trust.</p>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-transparent to-indigo-600 opacity-0 group-hover:opacity-10 dark:to-indigo-800 transition-opacity duration-300"></div>
    </div>

    <!-- Stat Card 3 -->
    <div class="group relative overflow-hidden bg-white dark:bg-gray-850 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <div class="p-6 sm:p-7 flex flex-col items-center text-center">
        <div class="text-gradient-to-r from-violet-600 to-fuchsia-600 dark:from-violet-400 dark:to-fuchsia-400 text-5xl sm:text-6xl font-extrabold mb-3 transition-colors duration-300">
          98%
        </div>
        <p class="text-lg font-semibold text-violet-800 dark:text-violet-200 mb-2">Customer Satisfaction</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Our top priority is your happiness.</p>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-transparent to-violet-600 opacity-0 group-hover:opacity-10 dark:to-violet-800 transition-opacity duration-300"></div>
    </div>

  </div>

  <style>
    /* Custom utility for gradient text */
    .text-gradient-to-r {
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .from-purple-600 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #a78bfa));
    }
    .to-indigo-600 {
      --tw-gradient-to: #4f46e5;
    }
    .from-indigo-600 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #818cf8));
    }
    .to-violet-600 {
      --tw-gradient-to: #7c3aed;
    }
    .from-violet-600 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #a78bfa));
    }
    .to-fuchsia-600 {
      --tw-gradient-to: #c026d3;
    }

    /* Dark mode adjustments for gradient text */
    .dark .from-purple-400 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #c4b5fd));
    }
    .dark .to-indigo-400 {
      --tw-gradient-to: #818cf8;
    }
    .dark .from-indigo-400 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #add8e6)); /* Light blue for contrast */
    }
    .dark .to-violet-400 {
      --tw-gradient-to: #a78bfa;
    }
    .dark .from-violet-400 {
      background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, #d8b4fe));
    }
    .dark .to-fuchsia-400 {
      --tw-gradient-to: #e879f9;
    }

    /* Dark mode background for white cards */
    .dark .bg-gray-850 {
        background-color: #1f2937; /* A slightly lighter gray than gray-900 */
    }
  </style>
</div>

豪华导航组件

适用于时尚和美容品牌的优雅、响应式导航组件，采用精致的黑白设计，具有明亮的强调色、深色模式支持和最少的元素。

打开预览

                <nav class="bg-white dark:bg-gray-900 shadow-sm dark:shadow-lg transition duration-300 ease-in-out">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <!-- Logo -->
        <a href="#" class="flex-shrink-0 flex items-center">
          <span class="text-2xl font-bold tracking-wider text-black dark:text-white uppercase font-serif">LUXE</span>
        </a>
      </div>

      <div class="flex items-center">
        <!-- Desktop Navigation -->
        <div class="hidden md:flex md:space-x-8 font-medium">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">About</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
        </div>

        <!-- Mobile Menu Button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500 dark:focus:ring-red-400 transition duration-200 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <!-- Icon when menu is open -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 animate-fade-in-down">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
    </div>
  </div>
</nav>

1 ... 7 8 9 10 11 ... 335