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
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
Un composant multimédia d’intégration brutaliste, dynamique et complexe pour les blogs, conçu avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec prise en charge des thèmes sombres, une mise en page complexe et une palette de couleurs complémentaire, conçu pour les tableaux de bord.