Playful_Farming_Content_Card
A simple, playful, and high-contrast content display card suitable for agricultural and farming websites, featuring rounded elements and dark mode support.
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>Related Components
Content Display Component
A responsive content display component featuring a minimalist and flat design style, ideal for blogs and content consumption. It has a grayscale color scheme and is equipped with interactive elements while supporting dark mode.
Content Display Component
A responsive content display component that incorporates microinteractions with engaging animations focused on user actions. It includes support for dark mode and placeholders for images and avatars.
Content Display Components Component
A simple and vibrant content display component with micro-interactions, responsive design, and dark theme support, suitable for blogs and content consumption. Uses picsum.photos for images and randomuser.me for avatars.