Bauhaus Tag Cloud Component

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

  <div class="max-w-7xl mx-auto py-8 sm:py-12 lg:py-16">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-8 sm:mb-10 text-center tracking-tight leading-tight dark:text-white text-gray-800">
      <span class="block">Explore Topics</span>
      <span class="block text-blue-600 dark:text-blue-400">Knowledge Hub</span>
    </h1>

    <div class="mb-8 sm:mb-10 lg:mb-12 flex flex-col sm:flex-row items-stretch sm:items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative flex-grow">
        <input type="text" placeholder="Search tags..." class="w-full pl-10 pr-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-all duration-300 ease-in-out">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out">
        Apply Filters
      </button>
    </div>

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

      <div class="card-panel p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-blue-600 dark:border-blue-500 transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-xl">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Popular Tags</h2>
        <div class="flex flex-wrap gap-3">
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200">Science & Innovation</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-red-200 hover:text-red-800 dark:hover:bg-red-800 dark:hover:text-red-200">Art History</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-green-200 hover:text-green-800 dark:hover:bg-green-800 dark:hover:text-green-200">Data Science</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-purple-200 hover:text-purple-800 dark:hover:bg-purple-800 dark:hover:text-purple-200">Philosophy</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-yellow-200 hover:text-yellow-800 dark:hover:bg-yellow-800 dark:hover:text-yellow-200">World Literature</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-teal-200 hover:text-teal-800 dark:hover:bg-teal-800 dark:hover:text-teal-200">Sustainable Energy</span>
        </div>
      </div>

      <div class="card-panel p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-gray-400 dark:border-gray-500 transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-xl">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Recently Added</h2>
        <div class="flex flex-wrap gap-3">
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200">Quantum Computing</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-red-200 hover:text-red-800 dark:hover:bg-red-800 dark:hover:text-red-200">Modern Art</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-green-200 hover:text-green-800 dark:hover:bg-green-800 dark:hover:text-green-200">Machine Learning Ethics</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-purple-200 hover:text-purple-800 dark:hover:bg-purple-800 dark:hover:text-purple-200">Existentialism</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-yellow-200 hover:text-yellow-800 dark:hover:bg-yellow-800 dark:hover:text-yellow-200">Postcolonial Theory</span>
        </div>
      </div>

      <div class="card-panel p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-blue-600 dark:border-blue-500 transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-xl">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Trending Now</h2>
        <div class="flex flex-wrap gap-3">
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200">AI & Society</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-red-200 hover:text-red-800 dark:hover:bg-red-800 dark:hover:text-red-200">Digital Humanities</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-green-200 hover:text-green-800 dark:hover:bg-green-800 dark:hover:text-green-200">Cybersecurity Basics</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-purple-200 hover:text-purple-800 dark:hover:bg-purple-800 dark:hover:text-purple-200">Critical Thinking</span>
          <span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-yellow-200 hover:text-yellow-800 dark:hover:bg-yellow-800 dark:hover:text-yellow-200">Global Economics</span>
        </div>
      </div>

      <div class="card-panel col-span-1 sm:col-span-2 lg:col-span-3 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-gray-400 dark:border-gray-500 transition-all duration-300 ease-in-out transform hover:scale-[1.005] hover:shadow-xl">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">All Tags (A-Z)</h2>
        <div class="flex flex-wrap items-center gap-x-6 gap-y-4 text-xl sm:text-2xl font-medium">
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Algorithms
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (12 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Astrophysics
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (8 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Biotechnology
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (15 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Climate Change
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (10 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Cognitive Science
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (7 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Cybersecurity
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (18 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Digital Marketing
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (9 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Environmental Policy
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (11 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Financial Literacy
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (14 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Game Development
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (13 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Global Health
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (6 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Human Rights
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (10 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Information Theory
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (5 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Journalism
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (8 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Kinetics
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (4 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Leadership
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (16 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Machine Learning
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (20 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Nanotechnology
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (7 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Organizational Behavior
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (9 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Project Management
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (19 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Quantum Physics
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (6 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Robotics
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (12 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Sociology
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (10 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Thermodynamics
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (5 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Urban Planning
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (8 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Virtual Reality
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (11 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Web Development
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (25 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Xenobiotics
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (2 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Youth Studies
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (7 courses)</span>
          </a>
          <a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
            Zoology
            <span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (6 courses)</span>
          </a>
        </div>
      </div>

    </div>
  </div>

  <!-- Tailwind Typography plugin classes (if used, should be configured in tailwind.config.js) -->
  <style>
    .tag-pill {
      @apply px-4 py-2 rounded-full font-medium transition-colors duration-200 ease-in-out cursor-pointer text-sm sm:text-base;
    }
    .card-panel {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease-in-out;
    }
    /* Ensuring dark mode transitions */
    .dark .card-panel {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 10px 15px rgba(0, 0, 0, 0.3);
    }
  </style>
</div>