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.
HTML Code
<div class="dark:bg-gray-900 py-8">
<div class="container mx-auto px-4">
<div class="max-w-sm mx-auto rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 overflow-hidden">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/400/300" alt="Media Placeholder">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
<div class="absolute bottom-0 left-0 p-4 text-white">
<h3 class="text-xl font-bold">Media Title</h3>
<p class="text-sm">Date Published</p>
</div>
</div>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-300 text-base">
This is a description of the media content. It can be a short summary or excerpt.
</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/random.jpg" alt="Avatar of Author">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Author Name</p>
<p class="text-gray-600 dark:text-gray-400">Author Title</p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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 Media Embed réactif de style Skeuomorphique, utilisant des couleurs de couleur Terre et adapté au commerce électronique, avec prise en charge du thème sombre.
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.