Composant d’intégration de média
Un composant d’intégration multimédia conçu avec des effets de glassmorphism, avec un design réactif adapté aux sites Web d’entreprise avec prise en charge du thème sombre.
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>Composants associés
Composant d’intégration de média
Composant d’intégration de médias réactifs avec style Glassmorphism, modèle de couleurs analogue et prise en charge du mode sombre pour la consommation de contenu.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu avec le style Neumorphism dans Tailwind CSS, qui prend en charge le mode sombre.
Composant d’intégration de média
Un composant d’intégration multimédia simple et réactif avec conception 3D en niveaux de gris et prise en charge du mode sombre, adapté aux sites Web d’entreprise. Utilise Tailwind CSS pour le coiffage.