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
Komponente "Neumorphe Karten"
Eine reaktionsschnelle Kartenkomponente im Neumorphism-Stil mit Unterstützung für dunkle Themen, subtilen Schatten und flexiblem Layout.
Neon_Glow_Farming_Cards
Ein komplexes Set an responsiven Karten für Landwirtschafts-/Landwirtschafts-Websites mit Neon-/Leuchteffekten mit einem Sonnenuntergangs-/warmen Farbschema, einschließlich Unterstützung für den Dunkelmodus.
Komponente "Karten im Dunkelmodus"
Eine responsive Kartenkomponente, die für Business-/Corporate-Websites mit einer Benutzeroberfläche im Dunkelmodus und einem Graustufen-Farbschema entwickelt wurde und sich durch moderate Komplexität und Interaktivität auszeichnet.