Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card

<div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-900 border-4 border-amber-900 dark:border-lime-400 font-mono overflow-hidden">
  <div class="max-w-xs mx-auto bg-amber-50 dark:bg-stone-800 border-4 border-amber-900 dark:border-lime-400 shadow-lg dark:shadow-md dark:shadow-lime-600/50 transition-all duration-300 hover:shadow-xl dark:hover:shadow-lime-600/70 focus-within:ring-4 focus-within:ring-lime-600 focus-within:ring-offset-4 focus-within:ring-offset-amber-100 dark:focus-within:ring-offset-zinc-900 overflow-hidden">
    <div class="relative overflow-hidden aspect-w-16 aspect-h-9 sm:aspect-w-4 sm:aspect-h-3">
      <img src="https://picsum.photos/seed/agriculture/400/300" alt="Agricultural Product" class="w-full h-full object-cover object-center border-b-4 border-amber-900 dark:border-lime-400 group-hover:scale-105 transition-transform duration-300 ease-in-out">
      <div class="absolute top-0 right-0 p-2 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-xs sm:text-sm font-bold border-l-4 border-b-4 border-amber-900 dark:border-lime-400 transform -translate-y-px translate-x-px">
        NEW
      </div>
    </div>
    <div class="p-4 sm:p-6 border-t-4 border-amber-900 dark:border-lime-400">
      <a href="#" class="block mt-2 mb-4 text-amber-900 dark:text-lime-400 text-xl sm:text-2xl font-extrabold uppercase leading-tight hover:underline focus:outline-none focus:ring-2 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800">
        Heirloom Seed Pack
      </a>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base mb-4 line-clamp-2">
        Premium quality heirloom seeds for robust yields and sustainable farming.
      </p>
      <div class="flex items-baseline justify-between mb-6">
        <span class="text-2xl sm:text-3xl font-extrabold text-amber-900 dark:text-lime-400">
          $19.99
        </span>
        <span class="text-sm text-stone-500 dark:text-stone-400 line-through">
          $24.99
        </span>
      </div>
      <button class="w-full py-3 px-4 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-lg sm:text-xl font-extrabold uppercase border-4 border-amber-900 dark:border-lime-400 whitespace-nowrap overflow-hidden text-ellipsis shadow-md dark:shadow-lg dark:shadow-lime-600/50 transition-colors duration-200 hover:bg-amber-800 dark:hover:bg-lime-500 focus:outline-none focus:ring-4 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800 active:border-amber-700 dark:active:border-lime-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>