Composants Composantes sociales Volet Composantes sociales

Volet Composantes sociales

Un composant social simple, sur le thème rétro/vintage, inspiré des documents papier/imprimés pour le commerce électronique, présentant un extrait de profil d’utilisateur avec prise en charge du mode sombre.

Aperçu

HTML Code

<div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-800 text-stone-800 dark:text-stone-200 min-h-screen">
  <div class="max-w-xs mx-auto bg-amber-100 dark:bg-zinc-700 shadow-md shadow-stone-300 dark:shadow-zinc-900 rounded-lg overflow-hidden border border-amber-200 dark:border-zinc-600 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-stone-400 dark:hover:shadow-zinc-950">
    <div class="relative p-4 sm:p-5 border-b border-amber-200 dark:border-zinc-600">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-semibold text-stone-700 dark:text-stone-100">User Profile</h3>
        <button aria-label="Settings" class="text-stone-500 dark:text-stone-300 hover:text-stone-700 dark:hover:text-stone-100 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-amber-300 dark:border-zinc-500 mb-4 object-cover shadow-sm shadow-stone-300 dark:shadow-zinc-900" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-700 dark:text-stone-100 mb-1">Jane Doe</h4>
      <p class="text-sm text-stone-500 dark:text-stone-300 mb-4">Verified Buyer</p>
      <div class="flex space-x-4 mb-4">
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">124</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">89</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Following</p>
        </div>
      </div>
      <button class="w-full py-2 px-4 rounded-md bg-rose-500 dark:bg-rose-700 text-white text-base font-medium shadow-sm transition-all duration-200 ease-in-out hover:bg-rose-600 dark:hover:bg-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-400 dark:focus:ring-rose-600 focus:ring-opacity-75">
        View Profile
      </button>
    </div>
    <div class="p-4 sm:p-5 border-t border-amber-200 dark:border-zinc-600 bg-amber-50 dark:bg-zinc-800 text-center">
      <p class="text-xs text-stone-500 dark:text-stone-400">Last active 2 hours ago</p>
    </div>
  </div>
</div>

Composants associés

Carte d’auteur 3D Social

Un composant de carte d’auteur réactif avec des effets 3D et des liens vers les réseaux sociaux, conçu pour les sections de blog/contenu. Il dispose d’un schéma de couleurs complémentaires (bleu pour l’identité/les infos, orange pour les accents/CTA), prend en charge le mode sombre et utilise Tailwind CSS pour le style. Le design est d’une complexité « simple » avec une mise en page de base et des éléments minimaux, mais le « design 3D » est incorporé pour la profondeur et l’engagement en utilisant des ombres et des effets de survol. Le composant comprend un avatar, le nom de l’auteur, une courte biographie, des icônes de médias sociaux et un bouton d’appel à l’action « Suivez-moi ». Il utilise un avatar randomuser.me comme espace réservé.

Ouvrir