CCHub Logo CCHub Tailwind Collection
コンポーネント タグクラウド 農業/農業のためのタグクラウドコンポーネント

農業/農業のためのタグクラウドコンポーネント

農業および農業のWebサイト向けに設計されたミニマリストでレスポンシブなタグクラウドコンポーネントで、クールなニュートラルカラーとダークモードのサポートが特徴です。

プレビュー

HTMLコード 

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-4xl mx-auto font-sans text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center sm:text-left">
    Explore Farming Topics
  </h2>
  <div class="flex flex-wrap gap-2 sm:gap-3 justify-center sm:justify-start">
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌱</span> Crop Rotation
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🚜</span> Farm Machinery
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌾</span> Grain Storage
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">💧</span> Water Management
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐄</span> Livestock Care
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🌎</span> Sustainable Farming
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐛</span> Pest Control
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">💰</span> Agricultural Economics
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🍎</span> Orchard Management
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">☀️</span> Climate Effects
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🔬</span> Soil Science
    </a>
    <a href="#" class="inline-flex items-center px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-blue-100 hover:text-blue-700 dark:hover:bg-blue-900 dark:hover:text-blue-200 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
      <span class="mr-1 sm:mr-2 text-xs">🐝</span> Pollination
    </a>
  </div>
</div>

関連コンポーネント

Tag Cloud Component - マーケットプレイス セピア/ブラウン マテリアルデザイン

マーケットプレイスプラットフォーム向けに設計された、セピア/ブラウンの色調のマテリアルデザインの原則を使用した、複雑で応答性の高いタグクラウドコンポーネントです。インタラクティブタグ、カテゴリフィルタリング、ダークモードのサポートを備えています。

開ける

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

ポートフォリオ用に設計された Neumorphic Tag Cloud コンポーネントで、単色の配色、レスポンシブ レイアウト、Tailwind CSS を使用したダーク モードのサポートでタグを表示します。

開ける

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

モノスペース/開発者の美学、落ち着いた配色を備えたシンプルでレスポンシブなタグクラウドコンポーネントで、旅行/観光Webサイト向けに設計されています。ダークモードのサポートが含まれています。

開ける