CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Komponente "Funktionale Komponenten"

Komponente "Funktionale Komponenten"

Eine einfache Webkomponente, die für den Konsum von Blogs und Inhalten entwickelt wurde, mit ansprechenden Mikrointeraktionen und einem Graustufen-Farbschema mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="p-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Blog Post Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3" />
      <div class="text-sm">
        <p class="text-gray-800 dark:text-white">Author Name</p>
        <p class="text-gray-500 dark:text-gray-400">Feb 16, 2023</p>
      </div>
    </div>
  </div>
  <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover bg-gray-200 dark:bg-gray-700 transition-all duration-300 transform hover:scale-105" />
  <div class="p-4 bg-gray-100 dark:bg-gray-700">
    <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-200 transition duration-150 ease-in-out">Read More</button>
  </div>
</div>

Verwandte Komponenten

Komponente "Funktionale Komponenten"

Eine minimalistische Portfolio-Komponente, die mit Tailwind CSS entworfen wurde, ein lebendiges Farbschema aufweist und den Dunkelmodus unterstützt. Diese Komponente ist für die Präsentation von Arbeiten oder Produkten vorgesehen und enthält Bilder und Avatar-Platzhalter.

Offen

Skeuomorphic_Analogous_Simple_Business_Component

Eine einfache Geschäftskomponente, die in einem skeuomorphen Stil mit analogen Farben entwickelt wurde, reaktionsschnell für Desktop, Tablet und Mobilgeräte mit Unterstützung für den Dunkelmodus.

Offen

Von Papier/Druck inspirierte monochrome Regierungskomponente

Eine Komponente mittlerer Komplexität, die physisches Papier und Druckmaterialien nachahmt und für Websites von Behörden/öffentlichen Diensten mit einem monochromatischen Farbschema und vollständiger Reaktionsfähigkeit entwickelt wurde, einschließlich Unterstützung des Dunkelmodus.

Offen