标记云组件

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-6 sm:mb-8 text-center">
      Popular Topics Tag Cloud
    </h2>
    <div class="flex flex-wrap justify-center gap-3 sm:gap-4 md:gap-5">

      <a href="#" class="inline-block bg-blue-600 dark:bg-blue-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-blue-700 dark:border-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        Analytics
      </a>
      <a href="#" class="inline-block bg-purple-600 dark:bg-purple-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-purple-700 dark:border-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
        Data Science
      </a>
      <a href="#" class="inline-block bg-green-600 dark:bg-green-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-green-700 dark:border-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75">
        Machine Learning
      </a>
      <a href="#" class="inline-block bg-red-600 dark:bg-red-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-red-700 dark:border-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
        Reporting
      </a>
      <a href="#" class="inline-block bg-yellow-600 dark:bg-yellow-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-yellow-700 dark:border-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
        Dashboards
      </a>
      <a href="#" class="inline-block bg-teal-600 dark:bg-teal-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-teal-700 dark:border-teal-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75">
        Visualization
      </a>
      <a href="#" class="inline-block bg-indigo-600 dark:bg-indigo-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-indigo-700 dark:border-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
        Big Data
      </a>
      <a href="#" class="inline-block bg-pink-600 dark:bg-pink-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-pink-700 dark:border-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75">
        Forecasting
      </a>
      <a href="#" class="inline-block bg-orange-600 dark:bg-orange-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-orange-700 dark:border-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        Predictive Models
      </a>
      <a href="#" class="inline-block bg-cyan-600 dark:bg-cyan-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-cyan-700 dark:border-cyan-800 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-75">
        KPIs
      </a>
      <a href="#" class="inline-block bg-fuchsia-600 dark:bg-fuchsia-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-fuchsia-700 dark:border-fuchsia-800 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-opacity-75">
        Real-time Data
      </a>
      <a href="#" class="inline-block bg-lime-600 dark:bg-lime-700 text-white text-sm sm:text-base font-semibold py-2 px-4 rounded-full shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-lime-700 dark:border-lime-800 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-75">
        Cloud Computing
      </a>
    </div>
  </div>
</div>