Karten-Komponente
Eine responsive Blog-/Content-Card-Komponente, die mit skeuomorphem Stil und Erdtönen gestaltet ist. Enthält einen Titel, ein Bild, eine kurze Beschreibung und einen Avatar für Autoreninformationen. Unterstützt den Dunkelmodus.
HTML-Code
<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
<div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="text-gray-800 dark:text-gray-200">
<p class="font-semibold">Author Name</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
</div>
</div>
</div>Verwandte Komponenten
Skeuomorphismus-Kartenkomponente
Eine reaktionsschnelle Kartenkomponente im Skeuomorphismus-Stil mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es enthält Platzhalterbilder und Avatare.
Karten-Komponente
Eine reaktionsschnelle Portfoliokartenkomponente mit einem brutalistischen Designstil, der ein pastellfarbenes Farbschema und moderate Komplexität mit interaktiven Funktionen verwendet. Diese Karte präsentiert Arbeiten oder Produkte und unterstützt den Dunkelmodus.
Komponente "Neumorphe Karten"
Eine reaktionsschnelle Kartenkomponente im Neumorphism-Stil mit Unterstützung für dunkle Themen, subtilen Schatten und flexiblem Layout.