検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

カルーセルスライダーコンポーネント

マテリアルデザインの美学、セピア/ブラウンの色調、ダークモードのサポートを備えたシンプルで応答性の高いカルーセルスライダーコンポーネントで、ポートフォリオに適しています。JavaScriptを使用しないため、純粋にCSS駆動型のコンポーネントになります。

開けるプレビュー

                <div class="relative w-full overflow-hidden bg-orange-50 dark:bg-zinc-800 py-12 sm:py-16 md:py-20 lg:py-24 font-sans">
  <div class="relative container mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Hidden radio inputs for carousel functionality (CSS only) -->
    <input type="radio" name="carousel-material" id="slide-1-material" class="hidden" checked>
    <input type="radio" name="carousel-material" id="slide-2-material" class="hidden">
    <input type="radio" name="carousel-material" id="slide-3-material" class="hidden">

    <div class="carousel-inner relative w-full flex transition-transform duration-500 ease-in-out" style="transform: translateX(calc(var(--carousel-translate-x, 0) * 100%));">
      <!-- Slide 1 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material1/600/400" alt="Project 1 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Elegant Web Design</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Crafting beautiful and functional websites with a focus on user experience and modern aesthetics. This project showcases a sophisticated approach to digital presence.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              View Project
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material2/600/400" alt="Project 2 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Mobile App Development</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Building intuitive and high-performing mobile applications for iOS and Android, ensuring seamless user interaction and robust functionality.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              Discover More
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material3/600/400" alt="Project 3 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Brand Identity Creation</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Developing strong and recognizable brand identities through comprehensive logo design, brand guidelines, and visual communication strategies.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              See Case Study
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Dots -->
    <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-3 mt-6 sm:mt-8">
      <label for="slide-1-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-2-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-3-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"> </label>
    </div>

    <!-- CSS for Carousel functionality (embed Tailwind custom classes or use external CSS) -->
    <style>
      /* Base styles for the carousel -- if not using a build tool, this would be in a style tag or separate CSS file */
      .carousel-inner {
        display: flex;
      }
      .carousel-item {
        flex-shrink: 0;
        width: 100%;
      }
      
      /* Carousel navigation using hidden radio inputs */
      #slide-1-material:checked ~ .carousel-inner {
        --carousel-translate-x: 0;
      }
      #slide-2-material:checked ~ .carousel-inner {
        --carousel-translate-x: -1;
      }
      #slide-3-material:checked ~ .carousel-inner {
        --carousel-translate-x: -2;
      }

      /* Navigation dot active state */
      #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #92400e; /* amber-800 */
        transform: scale(1.2);
        box-shadow: 0 0px 8px rgba(0,0,0,0.3);
      }
      /* Dark mode active state */
      .dark #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      .dark #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      .dark #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #ea580c; /* orange-600 */
      }
    </style>
  </div>
</div>

Neon_Glow_Gaming_Layout

ネオン/グロー効果とグレースケールの配色を備えた、複雑で応答性の高いゲームレイアウトコンポーネントで、ダークモードをサポートします。

開けるプレビュー

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-black dark:text-gray-100 font-mono overflow-hidden">

  <!-- Global Glow Background (Pseudo-elements or JS for better control, but using divs for pure HTML/CSS) -->
  <div class="absolute inset-0 z-0 opacity-20">
    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gray-700/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow"></div>
    <div class="absolute top-1/2 left-3/4 w-80 h-80 bg-gray-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-2000"></div>
    <div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-gray-600/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-4000"></div>
  </div>

  <!-- Main Content Container with Z-index to be above glows -->
  <div class="relative z-10 container mx-auto px-4 py-8 md:py-12 lg:py-16">

    <!-- Header -->
    <header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 border-b-2 border-gray-700 pb-4">
      <h1 class="text-4xl lg:text-5xl font-extrabold tracking-in-contract text-gray-100 drop-shadow-lg [text-shadow:_0_0_10px_rgb(255_255_255_/_0.5),_0_0_20px_rgb(255_255_255_/_0.3)] mb-4 md:mb-0">
        NEON NEXUS
      </h1>
      <nav class="flex space-x-6 text-gray-400 text-lg">
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Home
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Games
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Community
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Profile
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
      </nav>
    </header>

    <!-- Main Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

      <!-- Left Sidebar (Player Info / Quick Menu) -->
      <aside class="lg:col-span-1 border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
        <div class="flex flex-col items-center mb-6">
          <img class="w-24 h-24 rounded-full border-2 border-gray-700 p-1 mb-4 glow-avatar" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
          <h3 class="text-2xl font-bold text-gray-100 glow-text">GamerTagX</h3>
          <span class="text-sm text-gray-400">Level 99 - Elite</span>
        </div>
        <ul class="space-y-4 text-gray-300">
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4l-1-1 1-6M7 10h10a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8a2 2 0 012-2z"></path></svg>
              My Library
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              Chat Rooms
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
              Settings
            </a>
          </li>
        </ul>
        <button class="mt-8 w-full py-3 border border-gray-700 bg-gray-800/50 text-gray-200 rounded-md hover:bg-gray-700/70 transition-colors duration-300 glow-button">
          Logout
        </button>
      </aside>

      <!-- Main Content Area (Featured Games / News) -->
      <main class="lg:col-span-2 space-y-8">

        <!-- Featured Game Carousel (Simplified) -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Featured Warzone</h2>
          <div class="relative w-full h-64 md:h-80 rounded-md overflow-hidden border border-gray-700 glow-inset">
            <img class="w-full h-full object-cover object-center " src="https://picsum.photos/1200/600?random=1" alt="Featured Game 1">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 to-transparent flex items-end p-6">
              <h3 class="text-2xl font-bold text-gray-50 glow-text drop-shadow-md">CYBERPUNK ARENA 2077</h3>
              <button class="absolute bottom-6 right-6 px-5 py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button-play">
                Play Now
              </button>
            </div>
          </div>
          <div class="flex justify-center mt-4 space-x-2">
            <span class="block w-3 h-3 rounded-full bg-gray-600 glow-dot-active"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
          </div>
        </section>

        <!-- Latest News/Updates -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Latest Intel & Updates</h2>
          <div class="space-y-6">
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=2" alt="News Item 1">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Patch 1.0.5 'Phantom Echoes' Released!</h3>
                <p class="text-gray-400 text-sm">Major balance changes for all classes, new map 'The Void', and enhanced anti-cheat measures. Download now!</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Read More &rarr;</a>
              </div>
            </article>
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=3" alt="News Item 2">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Community Tournament Sign-ups Open</h3>
                <p class="text-gray-400 text-sm">Compete for glory and exclusive in-game rewards! Register your team before April 30th.</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Sign Up &rarr;</a>
              </div>
            </article>
          </div>
        </section>

      </main>

      <!-- Right Sidebar (Live Stream / Friends List) -->
      <aside class="lg:col-span-1 space-y-8 flex flex-col">

        <!-- Live Stream Widget -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border flex-grow">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Live Missions</h2>
          <div class="relative w-full aspect-video rounded-md overflow-hidden border border-gray-700 mb-4 glow-inset">
            <img class="w-full h-full object-cover" src="https://picsum.photos/400/225?random=4" alt="Live Stream Placeholder">
            <div class="absolute top-2 left-2 bg-red-600 text-gray-50 text-xs px-2 py-1 rounded glow-live">LIVE</div>
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950/70 to-transparent flex items-end p-3">
              <span class="text-xs text-gray-300 drop-shadow-sm">@StreamerProX <span class="text-gray-500">(1.2K Viewers)</span></span>
            </div>
          </div>
          <p class="text-gray-400 text-sm mb-4">'Conquering the Wasteland' - Join me for an epic solo run!</p>
          <button class="w-full py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button">
            Watch Stream
          </button>
        </section>

        <!-- Friends Online List -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Squad Online [<span class="text-green-500 drop-shadow-md [text-shadow:_0_0_5px_rgb(34_197_94_/_0.7)]">3</span>]</h2>
          <ul class="space-y-3">
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Neo_Warrior</span>
                <span class="block text-xs text-gray-500">In-game: Cyberpunk Arena</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Byte_Crusher</span>
                <span class="block text-xs text-gray-500">Online, Idle</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">GhostlyGamer</span>
                <span class="block text-xs text-gray-500">In-game: Warzone Rifts</span>
              </div>
            </li>
            <li class="flex items-center text-gray-500 opacity-70">
              <img class="w-10 h-10 rounded-full border-2 border-gray-700 p-0.5 mr-3" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold">Offline_Dude</span>
                <span class="block text-xs text-gray-600">Offline</span>
              </div>
            </li>
          </ul>
        </section>

      </aside>

    </div>

    <!-- Footer (simple) -->
    <footer class="mt-12 text-center text-gray-600 text-sm border-t-2 border-gray-800 pt-6">
      <p>&copy; 2077 Neon Nexus. All rights reserved. <span class="text-gray-700">[Powered by Cybernetic Code]</span></p>
    </footer>

  </div>

  <!-- Custom Tailwind CSS (for animations) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.2; }
      50% { transform: scale(1.1); opacity: 0.35; }
    }

    @keyframes tracking-in-contract {
      0% {
        letter-spacing: 1em;
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        letter-spacing: normal;
        opacity: 1;
      }
    }

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

    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .tracking-in-contract {
      animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }

    .glow-line {
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    .glow-border {
        box-shadow: 0 0 10px rgba(150, 150, 150, 0.15), 0 0 20px rgba(150, 150, 150, 0.05);
    }
    .dark .glow-border {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05);
    }

    .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.05);
    }
    .dark .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.08);
    }

    .glow-text {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-text {
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    .glow-card:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), 0 0 30px rgba(150, 150, 150, 0.1);
        transform: translateY(-2px);
    }
    .dark .glow-card:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 255, 255, 0.08);
    }

    .glow-button {
        box-shadow: 0 0 8px rgba(150, 150, 150, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05);
    }
    .glow-button:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
        transform: translateY(-1px);
    }
    .dark .glow-button {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.08);
    }
    .dark .glow-button:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.15);
    }

    .glow-button-play {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.0); /* softer initial glow for play button */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .glow-button-play:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .glow-live {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-avatar {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-avatar {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }

    .glow-avatar-online {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
    }

    .glow-dot-active {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }
    .dark .glow-dot-active {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    .glow-dot {
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-dot {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

    .glow-inset {
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-inset {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
    }

    .glow-image-border {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-image-border {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    }

    .glow-link:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

  </style>
</div>

ゲーム3Dパープルライトボックス

3Dデザイン要素と紫/紫の配色を備えたシンプルでレスポンシブな画像ライトボックスコンポーネントで、ゲームのWebサイトに適しています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-violet-300 to-purple-400 dark:from-gray-900 dark:via-gray-800 dark:to-purple-950 p-4 font-sans">

  <!-- Lightbox Overlay (Hidden by default, shown via JS in a real app) -->
  <div class="fixed inset-0 bg-black bg-opacity-70 dark:bg-opacity-80 flex items-center justify-center z-50 transition-opacity duration-300 opacity-0 pointer-events-none" id="lightbox-overlay">
    <div class="relative w-11/12 max-w-4xl p-2 md:p-4 bg-gradient-to-br from-violet-700 to-purple-900 rounded-xl shadow-2xl dark:from-violet-900 dark:to-purple-950 transform scale-95 opacity-0 transition-all duration-300 ease-out" id="lightbox-content">
      
      <!-- Inner pseudo-3D container -->
      <div class="p-1.5 md:p-2 bg-gradient-to-br from-purple-500/30 to-violet-900/30 rounded-lg transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 shadow-lg dark:from-purple-800/30 dark:to-violet-950/30 backdrop-blur-sm">
        <div class="p-1.5 md:p-2 bg-gradient-to-br from-violet-600/30 to-purple-800/30 rounded-md transform rotate-x-3 rotate-y-1 skew-x-0.5 skew-y-0.5 shadow-md dark:from-violet-800/30 dark:to-purple-900/30 backdrop-blur-sm">
          
          <img src="https://picsum.photos/1200/800" alt="Full size game screenshot" class="w-full h-auto rounded-lg shadow-xl border-2 border-purple-400 dark:border-violet-600">
        </div>
      </div>

      <!-- Close Button -->
      <button class="absolute top-0 right-0 -mr-2 -mt-2 md:-mr-4 md:-mt-4 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg transform rotate-45 hover:rotate-90 transition-transform duration-300 ease-in-out border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" 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>

      <!-- Navigation Buttons (Optional, for a gallery) -->
      <button class="absolute left-0 top-1/2 -ml-4 md:-ml-8 transform -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-200 border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" 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="M15 19l-7-7 7-7"></path>
        </svg>
      </button>
      <button class="absolute right-0 top-1/2 -mr-4 md:-mr-8 transform -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-200 border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" 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>
      </button>

    </div>
  </div>

  <!-- Example Trigger Image (Click this to trigger the lightbox visually here) -->
  <div class="relative group w-64 md:w-80 lg:w-96 transform hover:scale-105 transition-transform duration-300 ease-in-out cursor-pointer" onclick="document.getElementById('lightbox-overlay').classList.add('opacity-100', 'pointer-events-auto'); document.getElementById('lightbox-content').classList.remove('scale-95', 'opacity-0'); document.getElementById('lightbox-content').classList.add('scale-100', 'opacity-100');">
    <div class="relative p-2 md:p-3 bg-gradient-to-br from-violet-700 to-purple-900 rounded-xl shadow-2xl dark:from-violet-900 dark:to-purple-950 transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 group-hover:rotate-x-3 group-hover:rotate-y-1 group-hover:skew-x-0.5 group-hover:skew-y-0.5 transition-all duration-300 ease-out">
      <!-- Inner pseudo-3D container -->
      <div class="p-1.5 md:p-2 bg-gradient-to-br from-purple-500/30 to-violet-900/30 rounded-lg transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 shadow-lg dark:from-purple-800/30 dark:to-violet-950/30 backdrop-blur-sm group-hover:rotate-x-3 group-hover:rotate-y-1 group-hover:skew-x-0.5 group-hover:skew-y-0.5 transition-all duration-300 ease-out">
        <div class="p-1.5 md:p-2 bg-gradient-to-br from-violet-600/30 to-purple-800/30 rounded-md transform rotate-x-3 rotate-y-1 skew-x-0.5 skew-y-0.5 shadow-md dark:from-violet-800/30 dark:to-purple-900/30 backdrop-blur-sm group-hover:rotate-x-0 group-hover:rotate-y-0 group-hover:skew-x-0 group-hover:skew-y-0 transition-all duration-300 ease-out">
          <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto object-cover rounded-lg shadow-xl border-2 border-purple-400 dark:border-violet-600">
          <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
            <svg class="w-10 h-10 text-white" 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 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-sm text-purple-800 dark:text-purple-300 shadow-text transform -rotate-1 skew-x-1 group-hover:-rotate-0 group-hover:skew-x-0 transition-all duration-300 ease-out">Click to Enlarge</p>
  </div>

  <!-- Simple toggle for dark mode (for demo purposes) -->
  <button onclick="document.documentElement.classList.toggle('dark')" class="absolute bottom-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-full shadow-lg hover:bg-purple-700 transition-colors duration-300 dark:bg-violet-800 dark:hover:bg-violet-900">
    Toggle Dark Mode
  </button>

  <!-- Inline script for demonstration. In a real app, use external JS. -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const lightboxOverlay = document.getElementById('lightbox-overlay');
      const lightboxContent = document.getElementById('lightbox-content');

      // Close lightbox when clicking outside the content or on the close button
      lightboxOverlay.addEventListener('click', (event) => {
        if (event.target === lightboxOverlay || event.target.closest('button')) {
          lightboxContent.classList.remove('scale-100', 'opacity-100');
          lightboxContent.classList.add('scale-95', 'opacity-0');
          lightboxOverlay.classList.remove('opacity-100', 'pointer-events-auto');
        }
      });

       // Close lightbox with ESC key
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && lightboxOverlay.classList.contains('opacity-100')) {
          lightboxContent.classList.remove('scale-100', 'opacity-100');
          lightboxContent.classList.add('scale-95', 'opacity-0');
          lightboxOverlay.classList.remove('opacity-100', 'pointer-events-auto');
        }
      });
    });
  </script>

</div>

3D_Education_Form_Component

教育プラットフォーム向けのレスポンシブでハイコントラストの 3D インスパイアフォームコンポーネントで、ダークモードをサポートします。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden relative border border-gray-200 dark:border-gray-700
              transform perspective-1000 rotateX-0 rotateY-0 hover:rotateX-3 hover:rotateY-3 transition-all duration-500 ease-in-out
              group dark:shadow-2xl dark:shadow-indigo-900/50">

    <!-- 3D Top Edge Effect -->
    <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-gray-100 to-transparent dark:from-gray-700 -z-10
                transform rotateX-10 origin-top opacity-50"></div>

    <!-- 3D Bottom Edge Effect -->
    <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-t from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateX-10 origin-bottom opacity-50"></div>

    <!-- 3D Left Edge Effect -->
    <div class="absolute top-0 left-0 h-full w-4 bg-gradient-to-r from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateY-10 origin-left opacity-50"></div>

    <!-- 3D Right Edge Effect -->
    <div class="absolute top-0 right-0 h-full w-4 bg-gradient-to-l from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateY-10 origin-right opacity-50"></div>


    <div class="p-6 sm:p-8 flex flex-col items-center">
      <div class="mb-6 text-center">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight relative z-10">
          <span class="relative inline-block">
            Pathway to Knowledge
            <span class="absolute inset-x-0 bottom-0 h-2 bg-indigo-500 dark:bg-indigo-600 rounded-full opacity-60 transform translate-y-1 scale-x-75 group-hover:scale-x-90 transition-transform duration-300"></span>
          </span>
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300">Unlock your potential, one step at a time.</p>
      </div>

      <form class="w-full space-y-5">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Full Name</label>
          <input type="text" id="full-name" name="full-name" placeholder="Jane Doe"
                 class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                        bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-400
                        transition-all duration-200 ease-in-out
                        transform group-hover:scale-[1.01] hover:shadow-md">
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]"
                 class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                        bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-400
                        transition-all duration-200 ease-in-out
                        transform group-hover:scale-[1.01] hover:shadow-md">
        </div>

        <div>
          <label for="course" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Select a Course</label>
          <div class="relative">
            <select id="course" name="course"
                    class="block appearance-none w-full px-4 py-2 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                           bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white
                           transition-all duration-200 ease-in-out
                           transform group-hover:scale-[1.01] hover:shadow-md">
              <option value="" disabled selected>Choose an option</option>
              <option value="web-dev">Web Development Fundamentals</option>
              <option value="data-sci">Introduction to Data Science</option>
              <option value="ux-design">UX/UI Design Principles</option>
              <option value="ai-ml">AI & Machine Learning Basics</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/>
              </svg>
            </div>
          </div>
        </div>

        <div class="flex items-center">
          <input id="terms" name="terms" type="checkbox"
                 class="h-4 w-4 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400 border-gray-300 dark:border-gray-600 rounded
                        transform group-hover:scale-[1.05] transition-transform duration-200">
          <label for="terms" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
            I agree to the <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Terms of Service</a>
          </label>
        </div>

        <button type="submit"
                class="w-full relative py-3 px-4 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-700 dark:to-purple-700 text-white font-semibold rounded-lg
                       shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-indigo-500/50 dark:focus:ring-indigo-400/50
                       transform translate-z-0 group-hover:translate-z-3 transition-all duration-300 ease-in-out
                       group-hover:scale-105 group-hover:from-indigo-700 group-hover:to-purple-700 dark:group-hover:from-indigo-600 dark:group-hover:to-purple-600">
          
          <span class="absolute inset-0 flex items-center justify-center -z-10 group-hover:opacity-0 transition-opacity duration-300">
            <span class="bg-indigo-700 dark:bg-indigo-800 rounded-lg absolute inset-0 transform translate-y-1 translate-x-1 opacity-75 blur-sm"></span>
          </span>
          <span class="relative z-10">Enroll Now</span>
          <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </button>
      </form>

      <p class="mt-6 text-xs text-gray-500 dark:text-gray-400 text-center">
        By enrolling, you agree to receive educational updates and offers.
      </p>
    </div>
  </div>
</div>

<style>
  /* This is for tailwind's JIT compiler to pick up custom values */
  /* If you are using Tailwind Play or a full build, you might not need this explicitly */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotateX-3 {
    transform: rotateX(3deg);
  }
  .rotateY-3 {
    transform: rotateY(3deg);
  }
  .rotateX-10 {
    transform: rotateX(10deg);
  }
  .rotateY-10 {
    transform: rotateY(10deg);
  }
  .translate-z-0 {
    transform: translateZ(0);
  }
  .translate-z-3 {
    transform: translateZ(12px); /* equivalent to translate-z-3 */
  }
</style>

Bauhaus_Agriculture_Search_Box

バウハウスの原則、セピア/ブラウンの色調、およびダークモードのサポートで設計された、農業/農業Webサイト用のレスポンシブ検索ボックスコンポーネント。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 border-b border-amber-200 dark:border-stone-700 font-sans">
  <div class="max-w-4xl mx-auto py-4 sm:py-6 md:py-8 bg-amber-100 dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border-2 border-amber-300 dark:border-stone-700">
    <div class="px-5 py-4 sm:px-6 sm:py-5 flex flex-col sm:flex-row items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 sm:mb-0 text-center sm:text-left tracking-wider uppercase">
        Field Finder
      </h2>
      <div class="relative w-full sm:w-auto flex-grow max-w-md">
        <input type="text" placeholder="Search crops, fields, or equipment..." class="w-full py-3 pl-12 pr-4 rounded-full bg-amber-50 dark:bg-stone-700 text-stone-700 dark:text-stone-200 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300 border border-amber-300 dark:border-stone-600 shadow-inner text-base sm:text-lg transition-all duration-300 ease-in-out">
        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-stone-500 dark:text-stone-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>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-5 py-4 sm:px-6 sm:py-5 border-t border-amber-200 dark:border-stone-700">
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012.707 13H3a1 1 0 000-2H2.707L3 10.707V8a7 7 0 0114 0v2.707l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a6 6 0 00-6-6zM5 16a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"></path></svg>
        Plots
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a1 1 0 00-1-1H4a1 1 0 00-1 1v.586L2.707 9.707A1 1 0 012.707 11H3a1 1 0 100-2h.293l-.707-.707V8a2 2 0 012-2h2zm0 6a2 2 0 100 4h8a2 2 0 100-4H6z" clip-rule="evenodd"></path></svg>
        Crops
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM10 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM13 3a1 1 0 00-2 0v1a1 1 0 002 0V3z"></path><path fill-rule="evenodd" d="M3 8a3 3 0 013-3h8a3 3 0 013 3v7a3 3 0 01-3 3H6a3 3 0 01-3-3V8zm5-1a1 1 0 000 2h4a1 1 0 100-2H8zm-1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
        Equipment
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 1V.5a.5.5 0 011 0V1A5.5 5.5 0 007 6.5h6A5.5 5.5 0 0018.5 1V.5a.5.5 0 011 0V1a6.5 6.5 0 01-6.5 6.5H7A6.5 6.5 0 01.5 1zM2 11.5a1 1 0 112 0 1 1 0 01-2 0zm14 0a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path><path d="M11 5H9a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1zm3 11a1 1 0 100-2 1 1 0 000 2zm-8 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
        Weather
      </button>
    </div>
  </div>
</div>

ブルータリズムカートに入れるボタン

シンプルなブルータリズムスタイルの「カートに追加」ボタンコンポーネントで、高コントラスト、補色、ソーシャルメディアの目的を備えています。ダークモードのサポートにより完全にレスポンシブ。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-zinc-900 font-sans">
  <button class="relative group overflow-hidden px-6 py-3 bg-red-600 text-white font-black uppercase tracking-wider border-4 border-black dark:border-white text-lg sm:text-xl md:text-2xl transition-all duration-300 ease-in-out
    shadow-[8px_8px_0_0_#A855F7] hover:shadow-[12px_12px_0_0_#A855F7] dark:shadow-[8px_8px_0_0_#EC4899] dark:hover:shadow-[12px_12px_0_0_#EC4899]
    hover:-translate-y-1 hover:-translate-x-1 focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-red-500 dark:focus:ring-pink-500 dark:focus:ring-offset-zinc-900">
    
    <span class="absolute inset-0 bg-purple-600 dark:bg-pink-600 border-4 border-black dark:border-white -z-10
      transform translate-x-2 translate-y-2 group-hover:translate-x-3 group-hover:translate-y-3 transition-all duration-300 ease-in-out"></span>
    
    <span class="flex items-center space-x-3">
      <svg class="w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      <span>Add to Cart</span>
    </span>

  </button>
</div>

ヒートマップコンポーネント

農業/農業Webサイト向けのシンプルでレスポンシブなヒートマップコンポーネントで、レトロ/ビンテージの配色とダークモードのサポートを特徴とし、マイクロインタラクションを念頭に置いて設計されています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-colors duration-300">
    <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Field Soil Moisture Heatmap</h2>
      <div class="relative group">
        <button class="px-4 py-2 bg-green-700 hover:bg-green-600 active:bg-green-800 text-white text-sm font-semibold rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition-all duration-200 ease-in-out transform group-hover:scale-105 group-hover:rotate-1 group-active:scale-95">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 17V6zm9 6a1 1 0 11-2 0 1 1 0 012 0zm-3 1a1 1 0 100-2 1 1 0 000 2zm6-2a1 1 0 11-2 0 1 1 0 012 0z" clip-rule="evenodd" />
          </svg>
          View Details
        </button>
        <div class="absolute bottom-full mb-2 hidden group-hover:block transition-all duration-300 ease-out opacity-0 group-hover:opacity-100 -left-8 right-0 mx-auto w-48 p-2 text-xs text-white bg-gray-700 dark:bg-gray-900 rounded-md shadow-lg pointer-events-none origin-bottom scale-90 group-hover:scale-100">
          More information about this heatmap.
          <div class="absolute left-1/2 -ml-1 w-0 h-0 border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-900 transform translate-y-full -bottom-2"></div>
        </div>
      </div>
    </div>
    <div class="p-6">
      <div class="flex flex-col md:flex-row gap-6">
        <div class="relative flex-1 bg-gradient-to-br from-indigo-200 via-teal-200 to-yellow-200 dark:from-indigo-900/40 dark:via-teal-900/40 dark:to-yellow-900/40 rounded-lg p-6 shadow-inner overflow-hidden border-2 border-dashed border-gray-400 dark:border-gray-600 transition-all duration-300 group-hover:border-solid">
          <div class="absolute inset-0 bg-contain bg-no-repeat bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/farm/800/600'); filter: grayscale(100%);"></div>
          <div class="relative grid grid-cols-5 md:grid-cols-10 gap-1.5 auto-rows-min md:auto-rows-fr h-full" style="min-height: 200px;">
            <!-- Heatmap Cells -->
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="85%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">85%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="78%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">78%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="72%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">72%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="65%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">65%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="59%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">59%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="52%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">52%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="45%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">45%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="39%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">39%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="33%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">33%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="28%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">28%</span>
            </div>
            <!-- Repeat for more cells, adjusting background-color and data-tooltip-value -->
             <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="88%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">88%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="81%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">81%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="75%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">75%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="68%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">68%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="62%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">62%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="55%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">55%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="48%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">48%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="42%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">42%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="36%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">36%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="30%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">30%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="90%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">90%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="83%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">83%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="77%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">77%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="70%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">70%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="64%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">64%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="57%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">57%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="50%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">50%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="44%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">44%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="38%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">38%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="32%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">32%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="87%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">87%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="80%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">80%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="74%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">74%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="67%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">67%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="61%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">61%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="54%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">54%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="47%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">47%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="41%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">41%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="35%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">35%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="29%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">29%</span>
            </div>
            <!-- More rows/cols as needed for a larger grid -->
          </div>
        </div>

        <div class="flex flex-col space-y-4 md:w-1/3 min-w-[150px]">
          <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Legend</h3>
            <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #fef08a;"></span>High Moisture (80-100%)</li>
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #e0c878;"></span>Medium Moisture (50-79%)</li>
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #697718;"></span>Low Moisture (0-49%)</li>
            </ul>
          </div>
          <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Last Updated</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300">2023-10-27, 10:30 AM</p>
            <div class="flex items-center space-x-2 mt-4 text-gray-600 dark:text-gray-300">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Operator Photo" class="w-8 h-8 rounded-full border-2 border-green-600 dark:border-green-400 object-cover transform hover:scale-110 transition-transform duration-200 animate-pulse-slight">
              <p class="text-sm">By John Doe, Farm Ops</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p-6 pt-4 text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700">
      <p>Data provided by AgriSense Pro sensors. For optimal yield, consider irrigating areas with less than 60% soil moisture.</p>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for Retro/Vintage color palette for heatmap cells */
  /* These colors are manually set for demonstration */
  
  /* High Moisture (Warm/Yellow Tones) */
  [data-tooltip-value^='8'],
  [data-tooltip-value^='7'] {
    --cell-color: #fef08a; /* lightest yellow */
    --cell-color-darker: #d9b62c; /* darker yellow for border/active */
  }

  /* Medium Moisture (Muted Green/Brown Tones) */
  [data-tooltip-value^='6'],
  [data-tooltip-value^='5'] {
    --cell-color: #e0c878; /* light brown/khaki */
    --cell-color-darker: #b78f4a; /* darker brown for border/active */
  }

  /* Low Moisture (Desaturated Green/Gray Tones) */
  [data-tooltip-value^='4'],
  [data-tooltip-value^='3'],
  [data-tooltip-value^='2'] {
    --cell-color: #697718; /* muted dark green */
    --cell-color-darker: #313300; /* even darker green for border/active */
  }

  /* Example of how to add more nuanced colors if needed, e.g., for in-between ranges */
  [data-tooltip-value='85%'] { --cell-color: #fef08a; --cell-color-darker: #d9b62c; }
  [data-tooltip-value='78%'] { --cell-color: #f9e2ae; --cell-color-darker: #d1a65f; }
  [data-tooltip-value='72%'] { --cell-color: #f2d596; --cell-color-darker: #c69b59; }
  [data-tooltip-value='65%'] { --cell-color: #e0c878; --cell-color-darker: #b78f4a; }
  [data-tooltip-value='59%'] { --cell-color: #c8b760; --cell-color-darker: #9a8a3a; }
  [data-tooltip-value='52%'] { --cell-color: #b1a748; --cell-color-darker: #817a26; }
  [data-tooltip-value='45%'] { --cell-color: #999738; --cell-color-darker: #656417; }
  [data-tooltip-value='39%'] { --cell-color: #818728; --cell-color-darker: #4b4f00; }
  [data-tooltip-value='33%'] { --cell-color: #697718; --cell-color-darker: #313300; }
  [data-tooltip-value='28%'] { --cell-color: #516708; --cell-color-darker: #171800; }

  /* Ensure a smooth transition for colors if possible with more granular data points */
  /* This is a simplification; a real app would likely use JS to calculate colors based on value */

  @keyframes pulse-slight {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }

  .animate-pulse-slight {
    animation: pulse-slight 2s infinite ease-in-out;
  }

</style>

タグクラウドコンポーネント

農業/農業のWebサイト向けに設計された、秋の色をテーマにした複雑な産業をテーマにしたタグクラウドコンポーネント。複数のインタラクティブ要素、完全な応答性、およびダークモードのサポートを備えています。

開けるプレビュー

                <div class="font-sans bg-amber-50 dark:bg-zinc-900 transition-colors duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-gradient-to-br from-orange-800 to-red-900 dark:from-zinc-800 dark:to-stone-900 rounded-lg shadow-xl overflow-hidden animate-fade-in border-4 border-orange-900 dark:border-zinc-700 relative">
    
    <!-- Background Texture Overlay -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/crissxcross.png')] opacity-10 dark:opacity-5"></div>
    
    <div class="relative p-4 sm:p-6 md:p-8 space-y-6">
      <!-- Header Section -->
      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b-2 border-orange-700 dark:border-zinc-600 pb-4">
        <h2 class="text-3xl sm:text-4xl font-bold text-amber-50 dark:text-amber-100 mb-2 sm:mb-0">
          <i class="fas fa-tags mr-3 text-orange-300 dark:text-zinc-400"></i>Agricultural Insights
        </h2>
        <div class="flex items-center space-x-3">
          <span class="text-orange-200 dark:text-zinc-400 text-sm italic hidden sm:block">Last Updated: <span class="font-semibold">Oct 26, 2023</span></span>
          <button class="p-2 rounded-full bg-orange-700 hover:bg-orange-600 text-amber-50 dark:bg-zinc-700 dark:hover:bg-zinc-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-500">
            <i class="fas fa-sync-alt"></i>
          </button>
        </div>
      </div>

      <!-- Search and Filter Bar -->
      <div class="flex flex-col md:flex-row gap-4">
        <div class="relative flex-grow">
          <input type="text" placeholder="Search for a topic..." class="w-full pl-10 pr-4 py-2 rounded-md bg-orange-900 dark:bg-zinc-700 text-amber-100 placeholder-orange-300 dark:text-amber-100 dark:placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 border-2 border-orange-800 dark:border-zinc-600 shadow-inner-dark">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <i class="fas fa-search text-orange-300 dark:text-zinc-400"></i>
          </div>
        </div>
        <select class="w-full md:w-auto px-4 py-2 rounded-md bg-orange-900 dark:bg-zinc-700 text-amber-100 border-2 border-orange-800 dark:border-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-inner-dark">
          <option value="all">All Categories</option>
          <option value="crops">Crops</option>
          <option value="livestock">Livestock</option>
          <option value="machinery">Machinery</option>
          <option value="soil">Soil Health</option>
          <option value="sustainability">Sustainability</option>
        </select>
      </div>

      <!-- Tags Container -->
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 sm:gap-4 lg:gap-5 auto-rows-min mt-4 p-4 bg-orange-900/50 dark:bg-zinc-800/50 rounded-lg border-2 border-orange-800 dark:border-zinc-700 overflow-hidden shadow-inset-dark">
        <!-- Tag Item -->
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-seedling text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Crop Rotation</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">32 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-cow text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Livestock Care</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">28 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-tractor text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Farm Machinery</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">45 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-leaf text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Organic Farming</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">18 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-droplet text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Irrigation Systems</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">12 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-tree text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Agroforestry</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">9 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-bug text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Pest Management</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">21 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-dollar-sign text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Agricultural Economics</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">15 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-cloud-sun text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Climate Adaptations</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">10 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-tractor text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Precision Farming</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">25 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-truck-pickup text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Supply Chain</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">14 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-flask text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Soil Analysis</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">19 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-solar-panel text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Renewable Energy</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">7 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-graduation-cap text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Extension Services</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">11 topics</span>
        </a>
        <a href="#" class="group block p-3 rounded-md bg-orange-700 dark:bg-zinc-800 hover:bg-orange-600 dark:hover:bg-zinc-700 transition-all duration-200 text-center text-amber-50 dark:text-amber-100 border-2 border-orange-800 dark:border-zinc-700 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-amber-500 shadow-sm hover:shadow-md">
          <i class="fa-solid fa-chart-line text-orange-300 dark:text-zinc-400 mb-1"></i>
          <p class="text-sm font-medium">Market Trends</p>
          <span class="text-xs text-orange-200 dark:text-zinc-500 group-hover:text-amber-50 dark:group-hover:text-amber-100">16 topics</span>
        </a>
      </div>

      <!-- Footer Call to Action -->
      <div class="flex flex-col sm:flex-row justify-between items-center bg-orange-900/70 dark:bg-zinc-800/70 p-4 rounded-lg border-2 border-orange-800 dark:border-zinc-700 shadow-lg mt-6">
        <p class="text-amber-100 dark:text-amber-200 text-center sm:text-left mb-3 sm:mb-0">
          Can't find what you're looking for? <span class="font-semibold">Suggest a new topic!</span>
        </p>
        <button class="px-6 py-2 bg-orange-500 hover:bg-orange-400 text-orange-900 font-bold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-50 dark:focus:ring-orange-300 dark:bg-amber-500 dark:hover:bg-amber-400">
          Add New Tag <i class="fa-solid fa-plus-circle ml-2"></i>
        </button>
      </div>

    </div>
  </div>
  
  <!-- Include Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

<!-- Custom Styles for shadows using pseudo-elements or multiple box-shadows -->
<style>
  .shadow-inner-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 -2px 2px rgba(255, 255, 255, 0.05);
  }
  .dark .shadow-inner-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 2px rgba(255, 255, 255, 0.02);
  }
  .shadow-inset-dark {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 -4px 4px rgba(255, 255, 255, 0.03);
  }
  .dark .shadow-inset-dark {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 -4px 4px rgba(255, 255, 255, 0.01);
  }
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>

Luxury_Sepia_SaaS_Cards_Component

ラグジュアリー/プレミアムなデザインスタイル、セピア/ブラウンの配色、ダークモードのサポートやインタラクティブ要素など、テクノロジー/SaaSアプリケーション向けに最適化された、複雑でレスポンシブなカードコンポーネント。

開けるプレビュー

                <div class="font-sans bg-amber-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 leading-tight tracking-tight">
        Elevate Your Platform
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto">
        Discover how our cutting-edge solutions empower businesses to achieve unprecedented efficiency and growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Card 1: Advanced Analytics -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1015/600/400" alt="Advanced Analytics" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Advanced Analytics</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Data Intelligence</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Unlock profound insights with our sophisticated analytics suite. Transform raw data into actionable strategies that drive business growth and optimize performance.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Real-time data processing</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Predictive modeling tools</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Customizable dashboards</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Card 2: Secure Cloud Infrastructure -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1041/600/400" alt="Secure Cloud Infrastructure" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Secure Cloud</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Infrastructure</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Protect your valuable data with our robust and secure cloud infrastructure. Enjoy peace of mind knowing your operations are fortified against modern threats.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>End-to-end encryption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Compliance certifications</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Threat monitoring</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Explore Security
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Card 3: Seamless Integration -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1043/600/400" alt="Seamless Integration" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Seamless Integration</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Ecosystem Harmony</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Connect effortlessly with your existing tools and workflows. Our platform is designed for maximum compatibility, ensuring a smooth transition and enhanced productivity.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>API-first architecture</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Pre-built connectors</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Developer-friendly documentation</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            View Integrations
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-16 text-center">
      <h3 class="text-3xl font-semibold text-stone-900 dark:text-stone-50 mb-6">What Our Clients Say</h3>
      <div class="max-w-xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-8 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8">
        <div class="flex-shrink-0">
          <img class="h-24 w-24 rounded-full object-cover ring-4 ring-amber-500 dark:ring-amber-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="text-center md:text-left">
          <p class="text-lg text-stone-700 dark:text-stone-200 mb-4 italic leading-relaxed">
            "This platform has transformed our data analysis process. The insights are incredibly precise, and the ease of integration is unmatched."
          </p>
          <p class="text-stone-900 dark:text-stone-50 font-bold text-xl">Jane Doe</p>
          <p class="text-amber-700 dark:text-amber-400 text-sm font-medium">CEO, Global Innovations</p>
        </div>
      </div>
    </div>

  </div>
</div>

ミニマリストCRMナビゲーション

CRM/ビジネスツール用のシンプルでミニマリストなナビゲーションコンポーネントで、紫/紫の配色とダークモードをサポートする完全な応答性が特徴です。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-900 border-b border-purple-100 dark:border-purple-800 shadow-sm">
  <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">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-purple-600 dark:text-purple-400 text-2xl font-bold tracking-tight">
            CRM<span class="text-purple-400 dark:text-purple-600 text-base ml-1">Lite</span>
          </a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <!-- Current: "border-purple-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
          <a href="#" class="border-b-2 border-purple-600 text-purple-800 dark:text-purple-100 dark:border-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Dashboard
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Customers
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Tasks
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Reports
          </a>
        </div>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <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. -->
          <!-- Heroicon name: outline/x -->
          <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>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <!-- Current: "bg-purple-50 border-purple-500 text-purple-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
      <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:bg-gray-800 dark:border-purple-400 dark:text-purple-300">
        Dashboard
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Customers
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Tasks
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Reports
      </a>
    </div>
  </div>
</nav>

<script>
  // Basic JS for mobile menu toggle (not part of the HTML-only requirement, but for demonstration)
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', () => {
        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
        mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
        mobileMenu.classList.toggle('hidden');

        // Toggle icons
        const menuIcon = mobileMenuButton.querySelector('svg.block');
        const closeIcon = mobileMenuButton.querySelector('svg.hidden');

        if (menuIcon && closeIcon) {
          if (isExpanded) {
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
          } else {
            menuIcon.classList.add('hidden');
            closeIcon.classList.remove('hidden');
          }
        }
      });
    }
  });
</script>

1 ... 36 37 38 39 40 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント