CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Inhaltsanzeige Playful_Farming_Content_Card

Playful_Farming_Content_Card

Eine einfache, verspielte und kontrastreiche Content-Displaykarte, die sich für landwirtschaftliche und landwirtschaftliche Websites eignet, mit abgerundeten Elementen und Unterstützung für den Dunkelmodus.

Vorschau

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>

Verwandte Komponenten

Komponente "Inhaltsanzeige"

Eine Komponente im Glassmorphism-Stil für die Anzeige von Portfolioinhalten mit interaktiven Elementen, die den Dunkelmodus unterstützt.

Offen

Komponente "Inhaltsanzeige"

Eine reaktionsschnelle Komponente zur Präsentation von Arbeiten oder Produkten im Dunkelmodus mit einem pastellfarbenen Farbschema.

Offen

Komponente "Komponenten für die Inhaltsanzeige"

Eine reaktionsschnelle Komponente zur Anzeige von Inhalten, die für Geschäfts-/Unternehmenswebsites mit Unterstützung des Dunkelmodus und einem lebendigen Farbschema entwickelt wurde. Es enthält Abschnitte für Benutzer-Avatare, Textinhalte und Bilder.

Offen