Komponente "Medienkomponenten"
Eine responsive Medienkomponente für den E-Commerce mit Material Design und monochromatischer Farbgebung.
HTML-Code
<div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border border-gray-300 dark:border-gray-700" />
<div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400">Product description goes here. This is a brief introduction to the product.</p>
</div>
</div>
<div class="mt-4">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-72 object-cover rounded-md shadow-sm dark:shadow-lg" />
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:focus:ring-blue-400 transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>Verwandte Komponenten
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).
Retro-Medienkomponente
Eine reaktionsschnelle Medienkomponente im Retro-/Vintage-Design, die den Dunkelmodus unterstützt.
Brutalismus Buchung Medienkomponente
Eine einfache, brutalistische Medienkomponente für Buchungs-/Reservierungssysteme mit hohem Kontrast und komplementärem Farbschema, vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.