Composant Composants multimédias
Un composant de médias sociaux complexe, réactif et compatible avec le mode sombre avec un style Glassmorphism utilisant des couleurs vives.
HTML Code
<div class="p-4 lg:p-8 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-xl max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-indigo-700 dark:text-indigo-400">Alice Smith</p>
<p class="text-gray-600 text-sm dark:text-gray-400">Posted on August 25, 2023</p>
</div>
</div>
<div class="mb-4">
<img class="rounded-lg object-cover w-full h-48 border-2 border-pink-500" src="https://picsum.photos/seed/social1/600/400" alt="Post Image">
</div>
<p class="text-gray-800 leading-relaxed mb-4 dark:text-gray-300">
This is an example of a social media post content. Engaging and vibrant!
</p>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-400">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
<span>120 Likes</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.196-1.113A14.732 14.732 0 0112 20c-4.97 0-9-3.582-9-8s4.03-8 9-8a9.986 9.986 0 014.196 1.113A14.732 14.732 0 0112 4c4.97 0 9 3.582 9 8z" />
</svg>
<span>45 Comments</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.938 9 14.595 9 15.25V17.586a2 2 0 01-2.298 1.995L5 19.258V7.762c0-1.04.283-2.042.857-2.914m14.091 2.914c.574.872.857 1.874.857 2.914v10.492l-2.702 1.351A3 3 0 0115 19.586V15.25c0-.655.118-1.312.316-1.908a2.001 2.001 0 002.005-2.005L17.5 9.25v-2.702a2 2 0 00-2-2H11.7S9.25 4 7.709 4c-1.54 0-3.09.958-3.09 3.154V9l-.708-.354a2 2 0 00-2 0L3 9.25v-1.5c0-2.206 2.94-4.75 6-4.75S15 4 15 6.75v.5l1 .5H17a2 2 0 012 2v.993M2.44 19.09V15c0-1.414-.917-2.73-2.185-2.995M22.56 19.09V15c0-1.414.917-2.73 2.185-2.995" />
</svg>
<span>Share</span>
</div>
</div>
</div>Composants associés
Composant multimédia de voyage Art déco
Il s’agit d’un composant multimédia complexe d’inspiration Art déco pour les sites Web de voyage et de tourisme, mettant en vedette les points forts de la destination avec des tons sépia/bruns et des motifs géométriques. Entièrement réactif avec prise en charge du mode sombre.
Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre
Composant multimédia minimaliste
Un composant multimédia simple, propre et réactif pour les sites Web d’entreprise, avec des couleurs bonbons/douces et la prise en charge du mode sombre.