Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour les médias sociaux conçu dans un style skeuomorphe avec des couleurs pastel, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 max-w-lg mx-auto">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-300 mb-4">This is an example of skeuomorphic design in a social media component. The layout mimics a real-world interaction device.</p>
<img src="https://picsum.photos/400/200?random=1" alt="Content Image" class="rounded-lg mb-4 shadow-lg">
<div class="flex justify-between items-center">
<button class="bg-pink-300 dark:bg-pink-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-pink-400 dark:hover:bg-pink-500 transition">Like</button>
<button class="bg-blue-300 dark:bg-blue-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-blue-400 dark:hover:bg-blue-500 transition">Comment</button>
<button class="bg-green-300 dark:bg-green-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-green-400 dark:hover:bg-green-500 transition">Share</button>
</div>
</div>Composants associés
Carte de tableau de bord triadique de conception matérielle
Un composant d’affichage de contenu de tableau de bord simple et réactif avec l’esthétique du Material Design, utilisant une palette de couleurs triadique et la prise en charge du mode sombre. Convient pour afficher des mesures ou des informations clés.
Composant d’affichage du contenu
Un composant de style glassmorphism pour l’affichage du contenu du portefeuille avec des éléments interactifs, prenant en charge le mode sombre.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu réactif conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre et une palette de couleurs vives. Il comprend des sections pour les avatars des utilisateurs, le contenu textuel et les images.