Tag Cloud Component

<div class="font-mono bg-gray-100 text-gray-800 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-4xl bg-white shadow-lg rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-50 mb-2">
        <span class="block">explore: _</span>
        <span class="sr-only">Explore Destinations</span>
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Discover popular travel tags and destinations.</p>
    </div>
    <div class="p-4 sm:p-6">
      <div class="flex flex-wrap gap-2 sm:gap-3">
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-100 dark:hover:bg-blue-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Beaches
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Mountains
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Cities
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-800 dark:text-yellow-100 dark:hover:bg-yellow-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Adventures
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-800 dark:text-red-100 dark:hover:bg-red-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Culture
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-800 dark:text-indigo-100 dark:hover:bg-indigo-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Wildlife
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-800 dark:text-pink-100 dark:hover:bg-pink-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Ecotourism
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-teal-100 text-teal-800 hover:bg-teal-200 dark:bg-teal-800 dark:text-teal-100 dark:hover:bg-teal-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Relaxation
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-orange-100 text-orange-800 hover:bg-orange-200 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Historical Sites
        </a>
        <a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-cyan-100 text-cyan-800 hover:bg-cyan-200 dark:bg-cyan-800 dark:text-cyan-100 dark:hover:bg-cyan-700 transition-colors duration-200">
          <span class="pr-1">&#x2022;</span> Food Tours
        </a>
      </div>
    </div>
  </div>
</div>