Componente de nube de etiquetas para agricultura/ganadería
Un componente de nube de etiquetas minimalista y receptivo diseñado para sitios web agrícolas y ganaderos, con colores neutros fríos y soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de nube de etiquetas
Un componente de nube de etiquetas simple, receptivo y vibrante diseñado con los principios de Bauhaus para sitios web comerciales y corporativos, con formas geométricas y colores primarios de alta saturación con soporte para modo oscuro.
Componente de nube de etiquetas
Un componente de nube de etiquetas neumórficas diseñado para una cartera, que muestra etiquetas con un esquema de color monocromático, un diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente de nube de etiquetas de Glassmorphism
Un componente de nube de etiquetas de estilo glassmorphism con esquema de color púrpura/violeta, adecuado para carteras. Cuenta con elementos translúcidos esmerilados, diseño receptivo y compatibilidad con el modo oscuro.