Medien-Komponenten
Eine Komponente im Neumorphism-Stil für die Medienanzeige mit responsivem Design und Unterstützung für dunkle Themen.
HTML-Code
<div class="flex flex-col items-center justify-center p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-900 hover:shadow-xl transition-shadow duration-300 ease-in-out">
<div class="mb-4">
<img src="https://picsum.photos/300/200" alt="Media" class="w-full h-auto rounded-lg shadow-md" />
</div>
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg mr-2">
<h2 class="text-lg font-semibold dark:text-white">User Name</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 text-center">
This is a description of the media content that is displayed above. It's designed with a soft UI style to enhance the visual appeal.
</p>
</div>Verwandte Komponenten
Komponente "Medienkomponenten"
Eine reaktionsschnelle Medienkomponente mit Mikrointeraktionen und ansprechenden Animationen, die mit Tailwind CSS gestaltet wurde. Es unterstützt dunkle Themen und enthält Platzhalterbilder und Avatare.
Medienkomponenten Komponente 39
Eine Medienkomponente, die mit der Benutzeroberfläche des Dunkelmodus entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Designs mit Tailwind CSS bietet.
Glassmorphic Media-Komponente
Eine reaktionsschnelle Medienkartenkomponente mit einem Glasmorphismus-Design (Milchglaseffekt), die mit Tailwind CSS erstellt wurde. Enthält einen Bildplatzhalter (von picsum.photos) mit einem Hover-Reveal-Play-Symbol, Textinhalt, einen Autorenbereich mit einem Avatar (von randomuser.me) und Aktionsschaltflächen. Die Komponente unterstützt den Dunkelmodus mit Tailwind CSS 'dark:'-Varianten und reagiert auf verschiedene Bildschirmgrößen. Es ist kein JavaScript erforderlich. Platzieren Sie diese Komponente für einen optimalen visuellen Effekt auf einem kontrastierenden Hintergrund. Die Funktionalität des Dunkelmodus setzt eine entsprechende Tailwind-CSS-Konfiguration voraus (z. B. 'darkMode: "class"' in Ihrem tailwind.config.js).