検索コンポーネント

すべてのコンポーネント

利用可能なすべての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 (ミュート)

メンフィスのデザインに触発された複雑でレスポンシブなサイドバーナビゲーションコンポーネントで、落ち着いた配色で、ドキュメントや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>

セッションタイムアウト警告コンポーネント

政府/公共サービスWebサイト向けの複雑で応答性の高いセッションタイムアウトアラートコンポーネントで、クールなニュートラルを使用した有機的/自然にインスパイアされたデザインが特徴です。カウントダウンタイマー、延長またはログアウトのオプション、および完全なダークモードのサポートが含まれています。

開けるプレビュー

                <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>

セッションタイムアウト警告コンポーネント

マルチカラーグラデーションレインボーデザインのレスポンシブセッションタイムアウトアラートコンポーネントで、政府や公共サービスのWebサイトに適しています。ダークモードのサポートとスムーズな移行が特徴です。

開けるプレビュー

                <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>

ユーザーメンションコンポーネント

複雑で応答性の高いユーザーは、バウハウスにインスパイアされたデザイン、落ち着いた/彩度の低い色、ダークモードのサポートを特徴とするイベント/カンファレンスWebサイトのコンポーネントに言及しています。これにより、ユーザーはメンションする連絡先を検索して選択できます。

開けるプレビュー

                <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/ビジネスツール用に設計された複雑で応答性の高いエラーメッセージコンポーネントで、鮮やかな色とダークモードのサポートを備えた、クリーンでミニマルなスイス/インターナショナルタイポグラフィスタイルが特徴です。

開けるプレビュー

                <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

検索コンポーネント

カテゴリ

すべてのコンポーネント