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
Un composant d’intégration multimédia simple et réactif à l’esthétique cyberpunk et bleu d’entreprise, conçu pour les interfaces de médias sociaux avec prise en charge du mode sombre.
Composant d’intégration de média
Composant d’intégration multimédia avec micro-interactions, effets réactifs et prise en charge du thème sombre. Pas besoin de Javascript.
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.