Komponente "Inhaltsanzeige"
Eine Content-Display-Komponente mit Glassmorphism-Design mit responsivem Layout und Unterstützung für dunkle Themen.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
</div>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>
</div>
</div>Verwandte Komponenten
Material Design Triadic Dashboard-Karte
Eine einfache, reaktionsschnelle Komponente für die Anzeige von Dashboard-Inhalten mit Material Design-Ästhetik unter Verwendung eines triadischen Farbschemas und Unterstützung für den Dunkelmodus. Geeignet für die Anzeige wichtiger Metriken oder Informationen.
Komponente "Komponenten für die Inhaltsanzeige"
Eine Content Display Component mit Mikrointeraktionen, Graustufenfarben und moderater Komplexität, die für Portfolios mit responsiver Unterstützung für dunkle Themen entwickelt wurde.
Komponente "Inhaltsanzeige"
Eine reaktionsschnelle Komponente zur Anzeige von Inhalten mit einem minimalistischen und flachen Designstil, ideal für Blogs und den Konsum von Inhalten. Es hat ein Graustufen-Farbschema und ist mit interaktiven Elementen ausgestattet, während es den Dunkelmodus unterstützt.