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
Komponente "Medien einbetten"
Eine minimalistische Medieneinbettungskomponente, die für Dashboards mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS entwickelt wurde.
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.
Komponente "Medien einbetten"
Eine reaktionsschnelle Medieneinbettungskomponente, die mit dem Neumorphism-Stil in Tailwind CSS entworfen wurde und den Dunkelmodus unterstützt.