Componente di incorporamento multimediale
Un componente multimediale incorporato progettato con effetti glassmorphism, caratterizzato da un design reattivo adatto per siti Web aziendali con supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Componente 14 dell'incorporamento dei file multimediali
Un componente Media Embed progettato in uno stile scheumorfico, con effetti reattivi e supporto per temi scuri. Include un'immagine, una descrizione e un avatar dell'utente.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale brutalista, vibrante e complesso per i blog, costruito con un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale in stile neumorfismo adatto per il consumo di blog e contenuti, caratterizzato da una combinazione di colori triadica. Design reattivo con supporto per la modalità oscura.