Composant Composants de mise en page
Une mise en page de composant Web réactive suivant les principes de conception matérielle pour une application de médias sociaux avec prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Social Media Layout</h2>
<div class="grid grid-cols-1 gap-4">
<!-- Profile Header -->
<div class="flex items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">@johndoe</p>
</div>
</div>
<!-- Post Content -->
<div class="p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
<p class="text-gray-800 dark:text-gray-200 mb-2">This is a simple post layout demonstrating the use of Material Design principles.</p>
<img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-auto rounded-lg">
</div>
<!-- Action Buttons -->
<div class="flex justify-around mt-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700">Like</button>
<button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 dark:bg-green-800 dark:hover:bg-green-700">Comment</button>
<button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700">Share</button>
</div>
</div>
</div>Composants associés
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce simple et réactif avec une esthétique Material Design en niveaux de gris, avec une grille de produits, un en-tête et un pied de page, le tout avec prise en charge du mode sombre. Utilise picsum.photos pour les images de produits.
Composant de mise en page des médias sociaux
Un composant de mise en page de médias sociaux réactif et complexe inspiré de la 3D avec des couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend un en-tête avec un logo et une navigation, une zone de contenu principale avec des cartes dynamiques pour les messages et une barre latérale pour les profils d’utilisateurs et les sujets tendance. Chaque élément est conçu pour donner un sentiment de profondeur et d’interaction.
Composant de mise en page 3D
Un composant de mise en page de médias sociaux réactif 3D Design avec une palette de couleurs en niveaux de gris. Convient aux interfaces de réseaux sociaux.