Komponente "Medien einbetten"
Eine reaktionsschnelle Medieneinbettungskomponente, die mit einem Neumorphismus-Stil entwickelt wurde, mit lebendigen Farben und einer interaktiven Schnittstelle, die für Dashboard-Anwendungen geeignet ist.
HTML-Code
<div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl transition-shadow duration-300"><h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Media Embed</h2><div class="flex flex-col items-center w-full mb-4"><img src="https://picsum.photos/400/200" alt="Media" class="rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105"/><p class="text-gray-600 dark:text-gray-300 mt-2">Watch our latest video to stay updated!</p></div><div class="flex w-full justify-between items-center mb-2"><button class="bg-blue-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Play</button><button class="bg-red-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Like</button><button class="bg-yellow-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Share</button></div><div class="flex items-center mt-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md"/><p class="text-gray-800 dark:text-white ml-2">User Name</p></div></div>Verwandte Komponenten
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.
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.
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.