Composant de nuage de balises pour l’agriculture/l’élevage
Un composant de nuage de balises minimaliste et réactif conçu pour les sites Web agricoles et agricoles, avec des couleurs neutres froides et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de nuage de balises
Un composant de nuage de balises conçu avec le style Neumorphism en niveaux de gris, adapté aux blogs et à la consommation de contenu, avec des éléments interactifs.
Composant de nuage de balises Neumorphism
Un composant de nuage de balises réactif avec un design Neumorphism, une palette de couleurs pastel et des interactions complexes, conçu pour le commerce électronique. Inclut la prise en charge du mode sombre et utilise Tailwind CSS.
Composant Luxury Tag Cloud
Un composant de nuage de balises élégant et réactif conçu pour les services de conseil professionnels, avec une esthétique luxueuse/premium avec des tons de coucher de soleil/de couleurs chaudes et la prise en charge du mode sombre.