Einbettungskomponente für skeuomorphe Medien
Eine responsive Media Embed-Komponente mit Skeuomorphismus-Design, analogem Farbschema und moderater Komplexität für Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus mit Tailwind CSS.
HTML-Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
<div class="relative pb-9/16 mb-4">
<iframe class="absolute inset-0 w-full h-full rounded-md shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 ring-2 ring-gray-400 dark:ring-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Skeuomorphic Media Title</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Channel Name</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">
This is a description of the media content. It provides a brief overview
and context for the embedded video or audio. The design features subtle
shadows and gradients to mimic a tangible, real-world object.
</p>
</div>Verwandte Komponenten
Komponente zum Einbetten von Medien 14
Eine Medieneinbettungskomponente, die in einem skeuomorphen Stil gestaltet ist, mit responsiven Effekten und Unterstützung für dunkle Themen. Es enthält ein Bild, eine Beschreibung und einen Benutzer-Avatar.
Retro Media Embed-Komponente
Eine reaktionsschnelle Media Embed-Komponente mit einem "Retro/Vintage"-Design, inspiriert von der Ästhetik der 80er/90er Jahre wie alten Röhrenmonitoren und Videorekordern. Es verwendet ein komplementäres Farbschema aus Blaugrün und Orange auf schiefergrauer Basis, geeignet für "Business/Corporate"-Websites. Die Komponente zeichnet sich durch eine moderate Komplexität mit Hover-Effekten auf der Wiedergabeschaltfläche und der Medienminiaturansicht, einer gefälschten REC-Lichtanimation und dekorativen, nicht funktionalen Steuerelementen aus. Es enthält Unterstützung für dunkle Themen mit dem Präfix "dark:" von Tailwind. Der Medienbereich ist für ein Seitenverhältnis von 16:9 ausgelegt (erfordert das Tailwind Aspect-Ratio-Plugin oder einen CSS-Fallback wie padding-bottom-Trick). Es wird ein Platzhalterbild von picsum.photos verwendet.
Komponente "Medien einbetten"
Eine Medieneinbettungskomponente im Neumorphism-Stil, die für den Konsum von Blogs und Inhalten geeignet ist und ein triadisches Farbschema aufweist. Responsives Design mit Unterstützung für den Dunkelmodus.