Komponente "Inhaltsanzeige"
Eine reaktionsschnelle Komponente zur Anzeige von Inhalten, die Mikrointeraktionen mit ansprechenden Animationen umfasst, die sich auf Benutzeraktionen konzentrieren. Es umfasst Unterstützung für den Dunkelmodus und Platzhalter für Bilder und Avatare.
HTML-Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<div class="p-4">
<img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
<p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
<a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
</div>
</div>Verwandte Komponenten
Komponente "Inhaltsanzeige"
Eine reaktionsschnelle Komponente zur Präsentation von Arbeiten oder Produkten im Dunkelmodus mit einem pastellfarbenen Farbschema.
Komponente "Komponenten für die Inhaltsanzeige"
Eine Komponente zur responsiven Inhaltsanzeige mit Unterstützung des Dunkelmodus für Geschäfts-/Unternehmenswebsites.
Komponente "Inhaltsanzeige"
Eine reaktionsschnelle Inhaltsanzeigekomponente im Glassmorphism-Stil mit verschwommenem Hintergrund und durchscheinenden Elementen mit Unterstützung für den Dunkelmodus.