Catégories

Composants Profils d’utilisateurs

Profils d’utilisateurs

Affichage des informations et de l’activité de l’utilisateur

Composant Profils utilisateur

Un composant de profil utilisateur réactif avec des micro-interactions, une palette de couleurs en niveaux de gris, une mise en page complexe, une prise en charge du mode sombre et des images/avatars aléatoires.

Ouvrir l’aperçu

                  <div class="relative h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center">
    <div class="container mx-auto p-6">
      <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
        <div class="relative h-48 bg-gray-300 dark:bg-gray-700">
          <img class="w-full h-full object-cover object-center" src="https://picsum.photos/seed/random/800/400" alt="Background">
          <div class="absolute inset-0 bg-black opacity-25"></div>
        </div>
        <div class="relative px-6 pb-6 mt-[-70px]">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-white dark:border-gray-800">
                <img class="w-full h-full object-cover object-center" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
              </div>
              <h3 class="text-gray-900 dark:text-white text-2xl font-semibold">John Doe</h3>
            </div>
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">
              <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
              </svg>
            </button>
          </div>
          <p class="mt-4 text-gray-700 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex justify-around items-center mt-6">
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">1.2K</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Followers</p>
            </div>
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">500</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Following</p>
            </div>
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">10K</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Likes</p>
            </div>
          </div>
          <div class="mt-6">
            <h4 class="text-gray-900 dark:text-white text-lg font-semibold">Recent Activity</h4>
            <ul class="mt-4 space-y-3">
              <li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
                <span>Posted a new article</span>
              </li>
              <li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Liked a post</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

Profil d’utilisateur Simple Card

Carte de profil d’utilisateur réactive avec CSS Tailwind, conception matérielle, schéma de couleurs Earth Tones. Mode sombre pris en charge, pas besoin de JS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-full max-w-sm p-6 bg-white rounded-lg shadow-md dark:bg-gray-700">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/87.jpg" alt="User avatar">
      <h2 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Exploring the world, one byte at a time.</p>
    </div>
    <div class="grid grid-cols-2 gap-4 mt-6">
      <div class="text-center">
        <p class="text-gray-700 dark:text-gray-200">Followers</p>
        <p class="text-lg font-semibold text-gray-900 dark:text-white">1.2k</p>
      </div>
      <div class="text-center">
        <p class="text-gray-700 dark:text-gray-200">Following</p>
        <p class="text-lg font-semibold text-gray-900 dark:text-white">350</p>
      </div>
    </div>
    <div class="flex justify-center mt-6">
      <button class="px-4 py-2 font-bold text-white bg-teal-600 rounded-lg shadow-md hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800">View Profile</button>
    </div>
  </div>
</div>

Composant Profils utilisateur

Composant de profils d’utilisateur réactifs avec micro-interactions, palette de couleurs vives et niveau de complexité simple pour le portefeuille.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-gray-800 dark:to-gray-900">
  <div class="w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="flex justify-center">
      <img class="w-24 h-24 rounded-full border-4 border-purple-500 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile Picture">
    </div>
    <div class="text-center mt-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300">Web Developer</p>
    </div>
    <div class="flex justify-around mt-6">
      <div class="text-center">
        <p class="text-lg font-semibold text-purple-600 dark:text-pink-600">Projects</p>
        <p class="text-gray-600 dark:text-gray-300">12</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-purple-600 dark:text-pink-600">Followers</p>
        <p class="text-gray-600 dark:text-gray-300">500</p>
      </div>
    </div>
    <div class="mt-6 text-center">
      <button class="px-4 py-2 bg-purple-600 text-white text-sm font-semibold rounded-lg hover:bg-purple-700 dark:bg-pink-600 dark:hover:bg-pink-700 transform transition duration-300 hover:translate-y-1">View Profile</button>
    </div>
  </div>
</div>

Composant Profils utilisateur

Un composant de profil utilisateur réactif avec conception Neumorphism et prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6 space-y-6">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar">
      <h2 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-300">Software Engineer</p>
    </div>
    
    <div class="border-t border-b border-gray-300 dark:border-gray-600 py-4 space-y-4">
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Location:</span>
        <span>San Francisco, CA</span>
      </div>
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Joined:</span>
        <span>January 2023</span>
      </div>
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Projects:</span>
        <span>15</span>
      </div>
    </div>
    
    <div class="flex justify-around">
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark transition duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4m-4 4L14 6m-6 6l2-2m0 0l2-2m-3 3L9 9" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #7c7c7c;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #7c7c7c;
  }
</style>

Composant Profils utilisateur

Composant de profils d’utilisateur avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex flex-wrap items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/79.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">Software Engineer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Passionate about creating beautiful and functional web applications.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Another User Profile Card -->
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 m-4 neumorphism-light dark:neumorphism-dark">
    <div class="flex justify-center">
      <img class="w-32 h-32 rounded-full shadow-md border-4 border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Profile Picture">
    </div>
    <div class="mt-5 text-center">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Smith</h2>
      <p class="text-gray-600 dark:text-gray-400 mt-1">UX Designer</p>
      <p class="text-gray-500 dark:text-gray-500 text-sm mt-2">Focused on creating intuitive and enjoyable user experiences.</p>
    </div>
    <div class="flex justify-center mt-5">
      <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 mx-3">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="#" class="text-blue-700 hover:text-blue-900 dark:text-blue-600 dark:hover:text-blue-800 mx-3">
        <i class="fab fa-linkedin-in"></i>
      </a>
      <a href="#" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 mx-3">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>

  <!-- Add more profile cards as needed -->

</div>

<style>
.neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1c1c1c, -7px -7px 15px #2e2e2e;
}
</style>

Composant Profils utilisateur

Un composant de profils d’utilisateur réactif doté d’un style de conception glassmorphism, avec prise en charge des thèmes sombres et utilisation de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
      <ul class="mt-4 space-y-2 text-center">
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
      </ul>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
    <div class="flex flex-col items-center">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
      <p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
      <ul class="mt-4 space-y-2 text-center">
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
        <li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
      </ul>
    </div>
  </div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">