Composant d’affichage du contenu
Un composant simple d’affichage de contenu réactif pour les interfaces de médias sociaux, conçu avec les principes de conception matérielle et une palette de couleurs triadique.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto my-8 overflow-hidden">
<div class="p-4">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="mt-4 text-gray-700 dark:text-gray-300">
This is an example of a simple content display component in a social media context, showcasing the Material Design principles with a triadic color scheme.
</p>
</div>
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Content Image">
<div class="p-4">
<div class="flex justify-between items-center">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600">Like</button>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-700 dark:hover:bg-green-600">Share</button>
</div>
</div>
</div>
Composants associés
Composants d’affichage du contenu
Un portfolio de conception 3D présentant des travaux ou des produits avec une palette de couleurs en niveaux de gris et un design réactif, prenant en charge le mode sombre.
Affichage de la carte du produit rétro E-commerce
Un composant d’affichage de produits de commerce électronique complexe et réactif avec une esthétique rétro/vintage des années 80/90, avec une palette de couleurs violet/violet, des éléments interactifs et la prise en charge du mode sombre.
Affichage du contenu de la photographie ludique aux tons de bijoux
Un composant d’affichage de contenu complexe, ludique et amusant pour un portfolio ou une galerie de photographies, avec des tons de bijoux vifs, des éléments arrondis et un design réactif avec prise en charge du mode sombre. Il présente plusieurs éléments interactifs tels que des images en vedette, des mises en page de grille et des sections de profil.