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
Un composant d’intégration multimédia réactif avec prise en charge des thèmes sombres, une mise en page complexe et une palette de couleurs complémentaire, conçu pour les tableaux de bord.
Composant d’intégration de média skeuomorphe
Un composant d’intégration multimédia réactif avec une conception Skeuomorphism, une palette de couleurs analogue et une complexité modérée pour les sites Web d’entreprise. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant d’intégration de média
Un composant d’intégration multimédia doté d’un style de conception 3D pour plus de profondeur et d’engagement, d’effets réactifs et de prise en charge du mode sombre.