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.
HTML-Code
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8"> <div class="relative"> <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/> <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2"> <span>Featured Media</span> </div> </div> <div class="mt-4"> <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2> <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p> </div> <div class="flex items-center mt-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/> <div class="ml-3"> <p class="text-gray-800 dark:text-white font-semibold">John Doe</p> <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p> </div> </div></div>Verwandte Komponenten
Komponente "Medien einbetten"
Eine minimalistische und flache Design-Medieneinbettungskomponente mit Erdtönen, die für Geschäfts-/Unternehmenswebsites geeignet ist. Es handelt sich um eine Komponente mittlerer Komplexität mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es ist kein JavaScript enthalten.
Komponente "Medien einbetten"
Media Embed Component mit Mikrointeraktionen, responsiven Effekten und Unterstützung für dunkle Themen. Kein Javascript erforderlich.
Komponente "Medien einbetten"
Eine Medieneinbettungskomponente, die mit Glasmorphismus-Effekten entwickelt wurde und ein responsives Design bietet, das für Unternehmenswebsites mit Unterstützung für dunkle Themen geeignet ist.