Composants Tableaux Tableau de bord social Art Déco
Tableau de bord social Art Déco

Un composant de tableau de bord de complexité modérée pour les plateformes de rencontres/sociales, avec un style de design Art déco avec des couleurs sourdes/désaturées et une réactivité totale. Comprend des cartes de profil, un flux d’activité et une navigation, avec prise en charge du mode sombre.
Aperçu

HTML Code

<div class="min-h-screen bg-stone-100 text-stone-800 font-serif dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8">

  <!-- Header -->
  <header class="flex justify-between items-center mb-8 px-4 py-3 bg-stone-200 dark:bg-stone-800 shadow-md rounded-lg border border-stone-300 dark:border-stone-700">
    <h1 class="text-2xl sm:text-3xl font-bold tracking-wider text-amber-800 dark:text-amber-500 uppercase">
      <span class="hidden sm:inline">The</span> Social Soiree
    </h1>
    <div class="flex items-center space-x-4">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
      </a>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-9 h-9 sm:w-10 sm:h-10 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
    </div>
  </header>

  <!-- Main Content Area -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar / Navigation -->
    <aside class="lg:col-span-1">
      <nav class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
              <span>My Profile</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2zm7-2h-4v2h4V9zm-4-3h4v2h-4V6z" clip-rule="evenodd"></path></svg>
              <span>Messages <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-amber-600 rounded-full">3</span></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0010.518 8H10a2 2 0 00-2 2H6a2 2 0 00-2-2h-.518C3.238 6.606 1.684 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4zM10 14a6 6 0 000-12H8a6 6 0 000 12h2zm-2 2a2 2 0 100-4 2 2 0 000 4zM12 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0014.518 8H14a2 2 0 00-2 2h-2a2 2 0 00-2-2h-.518C1.238 6.606 0 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4z" clip-rule="evenodd"></path></svg>
              <span>Matches</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112.7 1.9L16 5.2a1 1 0 010 1.4L12.7 9.8a1 1 0 01-1.4-1.4L13.59 7H7a1 1 0 110-2h6.59l-2.29-2.29a1 1 0 010-1.414zM2 11h14a1 1 0 010 2H2a1 1 0 010-2z" clip-rule="evenodd"></path></svg>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content / Profile Cards & Activity Feed -->
    <main class="lg:col-span-2 space-y-8">

      <!-- Discover New Profiles -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Discover New Profiles
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- Profile Card 1 -->
          <div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Alice, 28</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Creative Soul</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 2 -->
          <div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Ben, 31</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Adventurer</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 3 (hidden on smaller screens) -->
          <div class="hidden lg:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Chloe, 26</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Musician</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 4 (hidden on smaller screens) -->
          <div class="hidden xl:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/88.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Diana, 29</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Philosopher</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity Feed -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Recent Activity
        </h2>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Sophia</span> liked your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">2 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Leo</span> sent you a new message.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">4 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Isabella</span> viewed your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">1 day ago</span>
            </div>
          </div>
        </div>
      </section>

    </main>
  </div>
</div>
Composants associés

Composant Tableaux de bord

Un composant de tableaux de bord simple et réactif conçu pour la présentation de portefeuilles, avec des micro-interactions et axé sur les tons de terre. Il prend en charge le thème sombre en utilisant Tailwind CSS.
Ouvrir
Tableau de bord d’entreprise rétro

Un composant de tableau de bord rétro/vintage en niveaux de gris pour les sites Web d’entreprise/d’entreprise, avec une complexité modérée et un design réactif. Prend en charge le thème sombre à l’aide du préfixe Tailwind CSS dark : pour le style. Images provenant de picsum.photos et avatars de randomuser.me.
Ouvrir
Composant de tableau de bord brutaliste en niveaux de gris

Une disposition de tableau de bord simple, de style brutaliste, en niveaux de gris pour les sites Web d’entreprise, réactive avec prise en charge du mode sombre, construite avec Tailwind CSS.
Ouvrir