Mise en page rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row gap-8">
<!-- Left Sidebar -->
<div class="md:w-1/4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Profile</h2>
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">View Profile</p>
</div>
</div>
<ul class="space-y-2">
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Feed</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Messages</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white text-sm">Settings</a></li>
</ul>
</div>
</div>
<!-- Main Content -->
<div class="md:w-1/2">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Posts</h2>
<div class="border-b border-gray-200 dark:border-gray-700 mb-6 pb-6">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is an example post with some sample text. #retro #coding</p>
<img class="w-full rounded-lg" src="https://picsum.photos/seed/retro1/600/400" alt="Post Image">
</div>
<div class="border-b border-gray-200 dark:border-gray-700 mb-6 pb-6">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">Another post example. Simple is often better. #monochromatic</p>
<img class="w-full rounded-lg" src="https://picsum.photos/seed/retro2/600/400" alt="Post Image">
</div>
</div>
</div>
<!-- Right Sidebar -->
<div class="md:w-1/4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">Suggestions</h2>
<ul class="space-y-4">
<li class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Sara White</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Follow</p>
</div>
</li>
<li class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">David Green</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Follow</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de mise en page
Un composant de mise en page de blog réactif conçu selon les principes de Material Design, utilisant une palette de couleurs monochromatique et prenant en charge le mode sombre.
Composant de mise en page du tableau de bord
Une mise en page de tableau de bord réactive avec l’esthétique de Material Design, y compris une barre latérale, un en-tête et une zone de contenu principal. Il prend en charge le mode sombre et utilise des couleurs complémentaires pour un look équilibré. La complexité est modérée avec des fonctionnalités de type interactif réalisées uniquement avec des classes CSS et Tailwind.
Mise en page e-commerce avec conception 3D
Une mise en page de composant Web réactive pour le commerce électronique avec des éléments de conception 3D, incorporant une palette de couleurs complémentaires et la prise en charge du thème sombre. Il comporte des fiches de produits, une barre de navigation et un pied de page, le tout stylisé avec Tailwind CSS.