Container-Komponente
Eine einfache, reaktionsschnelle Container-Komponente für den Konsum von Blogs/Inhalten mit Mikrointeraktionen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.
HTML-Code
<div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
<h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
</div>
</div>
</div>
</div>Verwandte Komponenten
Neon_Glow_Healthcare_Container_Component
Eine komplexe, reaktionsschnelle Container-Komponente für Anwendungen im Gesundheitswesen mit einem Neon-/Leucht-Schwarz-Weiß-Farbschema und einem lebendigen Akzent. Bietet mehrere interaktive Elemente, Unterstützung für den Dunkelmodus und semantisches HTML.
Skeuomorphe Containerkomponente
Eine Skeuomorphe Container-Komponente mit Graustufen-Farbschema, die für ein Portfolio entwickelt wurde, mit responsivem Design und Unterstützung für dunkle Themen.
Material Design Behälter
Eine Container-Komponente im Material Design-Stil, die Tailwind CSS verwendet, mit responsivem Design und Unterstützung für dunkle Themen.