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 carte brutaliste
Un composant de carte brutaliste avec un design réactif et une prise en charge du mode sombre.
Composant Cartes Skeuomorphic
Inspiré par le skeuomorphisme, le composant de carte suivant est entièrement réactif avec la prise en charge du thème sombre. Pour le mode sombre, la prise en charge CSS est suffisante. Aucun JavaScript n’est nécessaire.
Carte de conception matérielle
Composant de carte de style Material Design avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Caractéristiques repères visuels d’élévation et d’ondulation.