Composant de nuage de balises

<div class="bg-gray-950 text-green-400 min-h-screen p-4 sm:p-6 md:p-8 font-mono antialiased dark:bg-gray-50 dark:text-gray-900 border border-green-700 dark:border-gray-300 rounded-lg shadow-lg dark:shadow-xl">
  <div class="max-w-7xl mx-auto">
    <div class="flex items-center justify-between mb-6 border-b border-green-600 pb-4 dark:border-gray-300">
      <h2 class="text-2xl sm:text-3xl font-bold uppercase tracking-wider before:content-['>_'] before:mr-2 before:text-green-500 dark:before:text-gray-500">Game Tags Index</h2>
      <div class="hidden sm:flex items-center space-x-4 text-sm">
        <span class="text-green-500 dark:text-gray-500">Status: Online</span>
        <svg class="w-5 h-5 text-green-500 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <!-- Filter / Search Section -->
      <div class="md:col-span-1 bg-gray-900 p-4 border border-green-700 rounded-md shadow-inner dark:bg-gray-100 dark:border-gray-300">
        <h3 class="text-lg font-semibold mb-4 text-green-300 dark:text-gray-700">Search Command:</h3>
        <div class="mb-4">
          <label for="search-input" class="block text-sm text-green-400 mb-2 dark:text-gray-600">grep tag_name:</label>
          <input type="text" id="search-input" placeholder="e.g., RPG, Sci-Fi" class="w-full bg-gray-800 text-green-400 border border-green-600 px-3 py-2 rounded-sm focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:focus:border-gray-500 dark:focus:ring-gray-500">
        </div>

        <h3 class="text-lg font-semibold mb-4 text-green-300 dark:text-gray-700">Filter by Category:</h3>
        <div class="space-y-2 text-sm">
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100" checked>
            <span class="ml-2"><span class="text-green-500">$ </span>Action</span>
          </label>
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100">
            <span class="ml-2"><span class="text-green-500">$ </span>Adventure</span>
          </label>
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100" checked>
            <span class="ml-2"><span class="text-green-500">$ </span>RPG</span>
          </label>
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100">
            <span class="ml-2"><span class="text-green-500">$ </span>Strategy</span>
          </label>
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100">
            <span class="ml-2"><span class="text-green-500">$ </span>Simulation</span>
          </label>
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100">
            <span class="ml-2"><span class="text-green-500">$ </span>Indie</span>
          </label>
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100">
            <span class="ml-2"><span class="text-green-500">$ </span>Open World</span>
          </label>
          <label class="flex items-center text-green-400 dark:text-gray-600">
            <input type="checkbox" class="form-checkbox bg-gray-800 border-green-700 text-green-500 dark:bg-gray-200 dark:border-gray-400 dark:text-gray-700 focus:ring-offset-gray-900 dark:focus:ring-offset-gray-100">
            <span class="ml-2"><span class="text-green-500">$ </span>Multiplayer</span>
          </label>
        </div>
      </div>

      <!-- Tag Cloud Display Section -->
      <div class="md:col-span-3 bg-gray-900 p-4 border border-green-700 rounded-md shadow-inner dark:bg-gray-100 dark:border-gray-300">
        <div class="flex items-center justify-between mb-4 pb-2 border-b border-green-600 dark:border-gray-300">
          <h3 class="text-lg font-semibold text-green-300 dark:text-gray-700">Active Tags:</h3>
          <button class="px-3 py-1 bg-green-700 hover:bg-green-600 text-white text-sm rounded-md transition duration-200 dark:bg-gray-700 dark:hover:bg-gray-600">Clear All</button>
        </div>

        <div class="flex flex-wrap gap-2 mb-6">
          <span class="inline-flex items-center bg-green-800 text-green-200 text-xs px-2 py-1 rounded-sm border border-green-600 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
            Action <button class="ml-1 text-green-100 dark:text-gray-100 hover:text-green-500 dark:hover:text-gray-300">x</button>
          </span>
          <span class="inline-flex items-center bg-green-800 text-green-200 text-xs px-2 py-1 rounded-sm border border-green-600 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
            RPG <button class="ml-1 text-green-100 dark:text-gray-100 hover:text-green-500 dark:hover:text-gray-300">x</button>
          </span>
          <span class="inline-flex items-center bg-green-800 text-green-200 text-xs px-2 py-1 rounded-sm border border-green-600 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
            Fantasy <button class="ml-1 text-green-100 dark:text-gray-100 hover:text-green-500 dark:hover:text-gray-300">x</button>
          </span>
        </div>

        <h3 class="text-lg font-semibold mb-4 text-green-300 dark:text-gray-700">Available Tags:</h3>
        <div class="flex flex-wrap gap-2 text-sm">
          <!-- Example Tags - varying sizes/opacities for perceived 'weight' -->
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-xs rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Shooter</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-lg rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Sci-Fi</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-base rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Horror</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-xl rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Multiplayer</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-xs rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Singleplayer</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-lg rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Strategy</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-sm rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Sports</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-xl rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Open World</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-lg rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Indie</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-sm rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Puzzle</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-base rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Adventure</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-xs rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Simulation</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-lg rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">VR</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-xl rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Esports</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-sm rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Retro</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-base rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Survival</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-lg rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Crafting</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-xs rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Farming</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-xl rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Metroidvania</button>
          <button class="px-2 py-1 bg-gray-800 text-green-400 text-sm rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Cyberpunk</button>
          <button class="px-3 py-1 bg-gray-800 text-green-400 text-lg rounded-sm border border-green-700 hover:bg-green-900 hover:text-green-300 transition duration-200 dark:bg-gray-200 dark:text-gray-800 dark:border-gray-400 dark:hover:bg-gray-300 dark:hover:text-gray-900">Stealth</button>
        </div>
      </div>
    </div>

    <!-- Footer / Status Bar -->
    <div class="mt-8 text-sm text-green-500 border-t border-green-700 pt-4 flex flex-wrap justify-between items-center dark:text-gray-600 dark:border-gray-300">
      <div class="flex items-center space-x-2">
        <span>C:\GAMETAGS>_</span>
        <span class="animate-pulse text-green-400">|</span>
      </div>
      <span class="text-xs sm:text-sm">PID: 0x7E5 | Last Update: 2023-11-20 14:37 GMT</span>
    </div>
  </div>
</div>