Composant d’intégration de média
Un composant d’intégration multimédia réactif avec un design Glassmorphism, des couleurs de terre et une prise en charge du mode sombre, conçu avec Tailwind CSS pour les cas d’utilisation des médias sociaux. Comprend un effet de verre dépoli et utilise des images/avatars de substitution.
HTML Code
<div class="relative overflow-hidden rounded-lg shadow-lg group bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg"> <div class="relative w-full overflow-hidden bg-gray-200 rounded-t-lg aspect-w-16 aspect-h-9 group-hover:opacity-75"> <img src="https://picsum.photos/id/237/1000/600" alt="Placeholder image" class="object-cover object-center w-full h-full"> </div> <div class="flex items-center px-5 py-4"> <div class="flex-shrink-0"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-900 dark:text-white"> <a href="#" class="hover:underline"> Username </a> </p> <p class="text-xs text-gray-700 dark:text-gray-300"> Posted on March 15, 2023 </p> </div> </div> <div class="p-5"> <h3 class="text-lg font-medium text-gray-900 dark:text-white"> <a href="#"> Title of the Embedded Media </a> </h3> <p class="mt-2 text-sm text-gray-700 dark:text-gray-300"> This is a description of the embedded media, providing some context or details about the content. </p> </div> <div class="flex items-center justify-between px-5 py-3 bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20"> <div class="flex space-x-4"> <span class="text-sm text-gray-700 dark:text-gray-300">Likes: 1.2k</span> <span class="text-sm text-gray-700 dark:text-gray-300">Comments: 350</span> </div> <a href="#" class="text-sm font-medium text-yellow-700 hover:text-yellow-600 dark:text-yellow-500 dark:hover:text-yellow-400"> View More </a> </div> </div>Composants associés
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.
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.