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.
HTML Code
<div class="relative flex items-center justify-center h-96 overflow-hidden bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg m-4">
<!-- 3D effect background elements (simplified) -->
<div class="absolute inset-0 z-0 pointer-events-none transform scale-150">
<div class="absolute inset-0 bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700 opacity-50"></div>
<div class="absolute inset-0 border-4 border-gray-200 dark:border-gray-800 rounded-lg transform rotate-3"></div>
</div>
<!-- Content area -->
<div class="relative z-10 p-8 bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl max-w-md text-center">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Embed Media</h2>
<!-- Placeholder for embedded media (e.g., iframe for YouTube,- Vimeo) -->
<!-- Replace with actual embed code -->
<div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
<p>Media Placeholder</p>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300 text-sm">Embed your videos, maps, or other media here.</p>
</div>
</div>Composants associés
Composant d’intégration multimédia 14
Un composant d’intégration multimédia conçu dans un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Il comprend une image, une description et un avatar de l’utilisateur.
Composant d’intégration multimédia - Sports/Fitness
Un composant multimédia réactif et minimaliste pour les applications de sport/fitness, avec des couleurs vives, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.
Composant d’intégration de média
Un composant multimédia complexe et réactif pour la consommation de blog/contenu, avec un design organique/inspiré de la nature, des tons de bijoux et la prise en charge du mode sombre. Comprend un lecteur vidéo, le contenu de l’article et les médias associés.