Playful_Farming_Content_Card
Una tarjeta de visualización de contenido simple, lúdica y de alto contraste adecuada para sitios web agrícolas y agrícolas, con elementos redondeados y soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 bg-green-50 dark:bg-gray-800 font-sans">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Farm landscape">
<div class="p-6 text-center">
<h3 class="text-2xl sm:text-3xl font-extrabold text-green-700 dark:text-green-400 mb-3 leading-tight">Harvesting Joy!</h3>
<p class="text-gray-600 dark:text-gray-300 text-base leading-relaxed mb-6">
Discover the bounty of nature with our fresh, organic produce. From farm to table, we bring you the best!
</p>
<a href="#" class="inline-flex items-center px-6 py-3 rounded-full bg-yellow-400 text-green-800 dark:bg-yellow-500 dark:text-green-900 font-bold text-lg shadow-md hover:bg-yellow-500 dark:hover:bg-yellow-600 transform transition-transform duration-200 hover:-translate-y-1">
Learn More
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>Componentes relacionados
Tarjeta de tablero Triádico de Material Design
Un componente de visualización de contenido de tablero simple y receptivo con estética de Material Design, que utiliza un esquema de color triádico y admite el modo oscuro. Adecuado para mostrar métricas o información clave.
Tarjeta de Listado de Propiedades - Swiss Pastel
Una tarjeta de listado de propiedades simple, limpia y receptiva con un estilo de tipografía suizo / internacional y una combinación de colores pastel, adecuada para plataformas inmobiliarias. Incluye soporte para modo oscuro.
Componente de visualización de contenido
Un componente de visualización de contenido responsivo con un estilo de diseño minimalista y plano, ideal para blogs y consumo de contenido. Tiene un esquema de color en escala de grises y está equipado con elementos interactivos a la vez que admite el modo oscuro.