Search Components

User Profiles

Display of user information and activity

User Profile Simple Card

Responsive User Profile Card with Tailwind CSS, Material Design, Earth Tones Color Scheme. Dark mode supported, No JS needed.

Open Preview

                <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>

User Profiles Component

Responsive User Profiles Component with Microinteractions, Vibrant color scheme, and Simple complexity level for Portfolio.

Open Preview

                <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>

User Profiles Component

A responsive User Profile component with Neumorphism design and dark mode support.

Open Preview

                <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>

User Profiles Component

User Profiles Component with Neumorphism design, responsive effects, and dark theme support.

Open Preview

                <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>

User Profiles Component

A responsive user profiles component featuring a glassmorphism design style, with support for dark themes and using Tailwind CSS.

Open Preview

                <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">

Search Components

Categories

User Profiles

User Profile Simple Card

User Profiles Component

User Profiles Component

User Profiles Component

User Profiles Component