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.
HTML Code
<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8"> <div class="relative"> <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/> <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2"> <span>Featured Media</span> </div> </div> <div class="mt-4"> <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2> <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p> </div> <div class="flex items-center mt-4"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/> <div class="ml-3"> <p class="text-gray-800 dark:text-white font-semibold">John Doe</p> <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p> </div> </div></div>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia réactif pour le commerce électronique avec un design minimaliste, des couleurs vives et une prise en charge du mode sombre.
Composant d’intégration de média rétro
Un composant multimédia réactif avec un design « Rétro/Vintage », inspiré de l’esthétique des années 80/90 comme les vieux moniteurs CRT et les lecteurs magnétoscopes. Il utilise une palette de couleurs complémentaires de sarcelle et d’orange sur une base gris ardoise, adaptée aux sites Web « Business/Corporate ». Le composant présente une complexité modérée avec des effets de survol sur le bouton de lecture et la vignette multimédia, une fausse animation lumineuse REC et des éléments de contrôle décoratifs non fonctionnels. Il inclut la prise en charge du thème sombre à l’aide du préfixe 'dark :' de Tailwind. La zone multimédia est conçue pour un rapport d’aspect de 16:9 (nécessite le plugin de rapport d’aspect Tailwind ou une solution de repli CSS comme l’astuce du rembourrage inférieur). L’image de remplacement de picsum.photos est utilisée.
Composant d’intégration de média
Un composant d’intégration multimédia de style Neumorphism adapté à la consommation de blogs et de contenus, doté d’une palette de couleurs triadique. Conception réactive avec prise en charge du mode sombre.