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
Composant de la carte Skeuomorphism
Un composant de carte réactif de style Skeuomorphism avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend des images et des avatars de substitution.
Composant Cartes Skeuomorphic
Un composant de cartes simple conçu dans un style skeuomorphe, utilisant un schéma de couleurs analogue pour la lecture et la consommation de contenu. Ce composant est réactif et prend en charge le thème 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.