Composants Composants de mise en page Mise en page rétro des médias sociaux

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.

Aperçu

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

Glassmorphism E-commerce Feature Layout Component

Ouvrir

Composant Composants de mise en page

Un composant de mise en page réactive présentant des micro-interactions par le biais d’animations attrayantes qui répondent aux actions de l’utilisateur, avec prise en charge du mode sombre et de l’utilisation de Tailwind CSS.

Ouvrir

Disposition du lecteur de musique Cyberpunk

Une disposition de lecteur de musique sur le thème cyberpunk avec une esthétique néon futuriste, des arrière-plans sombres et des couleurs d’accentuation vibrantes, conçue pour la réactivité et la prise en charge du mode sombre.

Ouvrir