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.
HTML-Code
<div class="flex flex-col items-center justify-center p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-xl shadow-lg max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-40">
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-md">
<div class="flex flex-col">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Company Name</h2>
<p class="text-gray-600 dark:text-gray-400">Professional tagline or subtitle goes here.</p>
</div>
</div>
<div class="relative w-full py-6 bg-white bg-opacity-30 rounded-lg shadow-md dark:bg-gray-700 dark:bg-opacity-30">
<iframe class="w-full h-48 rounded-lg" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
<div class="absolute inset-0 rounded-lg border-2 border-white opacity-30"></div>
</div>
<div class="mt-4">
<button class="px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800">Learn More</button>
</div>
</div>Verwandte Komponenten
Media Embed Component - Minimalistische Erdtöne
Eine minimalistische Medieneinbettungskomponente für Dashboards mit responsivem Design und Unterstützung für dunkle Themen in Erdtönen. Es werden ein Videoplayer, ein Titel, eine Beschreibung und Kanalinformationen angezeigt.
Komponente "Medien einbetten"
Eine reaktionsschnelle Media Embed-Komponente, die im Glassmorphism-Stil gestaltet wurde und interaktive Elemente für den Konsum von Inhalten enthält.
Komponente "Medien einbetten"
Eine reaktionsschnelle Medieneinbettungskomponente im Retro-/Vintage-Stil, die dunkle Themen unterstützt und Platzhalterbilder und Avatare enthält.