Cartes sociales en mode sombre
Un composant de carte réactif conçu pour le mode sombre avec des tons de terre, conçu pour les interfaces de médias sociaux.
HTML Code
<div class="max-w-sm mx-auto p-4">
<div class="bg-gray-800 rounded-lg shadow-lg dark:bg-gray-900">
<img class="rounded-t-lg" src="https://picsum.photos/400/200" alt="Card image cap">
<div class="p-4">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-4">
<h2 class="text-lg font-bold text-gray-300 dark:text-gray-100">John Doe</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
</div>
<p class="mt-2 text-gray-300 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut libero et neque vehicula porta.
</p>
<div class="flex justify-between mt-4">
<button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Like</button>
<button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Comment</button>
<button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Share</button>
</div>
</div>
</div>
</div>Composants associés
Neon_Glow_Farming_Cards
Un ensemble complexe de cartes réactives pour les sites Web agricoles, avec des effets de néon/lueur avec une palette de couleurs coucher de soleil/chaudes, y compris la prise en charge du mode sombre.
Composant Glassmorphism Cards
Composants de cartes Glassmorphism aux couleurs vives. Conception réactive avec prise en charge du thème sombre. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
Composant Cartes de médias sociaux
Un composant de carte minimaliste et dynamique adapté aux interfaces de médias sociaux, affichant les messages des utilisateurs avec des images, des likes, des commentaires et des options de partage. Il est entièrement réactif et prend en charge le mode sombre.