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 du support Neumorphism
Un composant multimédia d’intégration multimédia neumorphe pour les sites Web d’entreprise, avec un design réactif et une prise en charge du thème sombre utilisant des couleurs complémentaires.
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu dans le style Glassmorphism, avec des éléments interactifs pour la consommation de contenu.
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.