Playful_Farming_Content_Card
Une carte d’affichage de contenu simple, ludique et contrastée adaptée aux sites Web agricoles et agricoles, avec des éléments arrondis et la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif qui intègre des micro-interactions avec des animations attrayantes axées sur les actions de l’utilisateur. Il inclut la prise en charge du mode sombre et des espaces réservés pour les images et les avatars.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des microinteractions, une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Propose des effets de survol subtils et des animations de concentration sur des éléments interactifs.
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif de style Glassmorphism, avec un arrière-plan flou et des éléments translucides avec prise en charge du mode sombre.