Playful_Farming_Content_Card

<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>