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
Consulting_Services_Pricing_Table_Monospace_Pastel
Un composant de tableau de prix réactif pour les services de conseil, présentant une esthétique monospace/développeur avec une palette de couleurs pastel. Inclut la prise en charge du mode sombre et une mise en page épurée adaptée à l’affichage des niveaux de service.
Composant Composants de mise en page
Un composant de mise en page de portfolio réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue et conçu pour une complexité moyenne avec des fonctionnalités interactives pour présenter des travaux ou des produits.
Composants de mise en page Composant 40
Un composant de mise en page réactif avec des micro-interactions avec des animations attrayantes. Il comprend une structure de carte avec des interactions utilisateur telles que des effets de survol, une mise à l’échelle et des ajustements de thème sombre.