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
Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre
Cyberpunk_Dating_Media_Component
Un composant multimédia réactif pour les plateformes de rencontres/sociales avec une esthétique cyberpunk, avec des couleurs vives de bonbon, des arrière-plans sombres et des éléments interactifs. Prend en charge le mode sombre.
Composants multimédias Composante 2
Un composant multimédia de style rétro/vintage avec un design nostalgique inspiré de l’esthétique des années 80/90, avec des effets réactifs et une prise en charge du thème sombre, en utilisant Tailwind CSS.