Search Components

User Profiles

Display of user information and activity

Neumorphic User Profiles Component

A complex, responsive user profiles component with a neumorphic design style and ocean/blue color scheme, suitable for business/corporate websites. Includes dark mode support.

Open Preview

                <div class="bg-blue-100 dark:bg-gray-900 min-h-screen py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-500">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-blue-900 dark:text-blue-200 text-center mb-12 sm:text-5xl lg:text-6xl drop-shadow-lg">
      Our Esteemed Team
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
      <!-- Profile Card 1 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Jane Doe
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">CEO, Founder</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Innovating the future, one elegant solution at a time."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Profile of Mark Johnson">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Mark Johnson
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Lead Developer</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Crafting robust and scalable software solutions with passion."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile of Sarah Lee">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Sarah Lee
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Head of Marketing</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Driving brand growth with creative strategies and data-driven insights."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Profile of David Chen">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-red-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          David Chen
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Financial Advisor</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Guiding clients towards financial success with strategic insights."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom CSS for Neumorphism Shadows */
  .shadow-custom-light {
    box-shadow: 8px 8px 16px #94c8e7, -8px -8px 16px #d4efff;
  }
  .dark .shadow-custom-dark {
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #3a4b6b;
  }
  .shadow-custom-hover-light {
    box-shadow: inset 6px 6px 12px #94c8e7, inset -6px -6px 12px #d4efff;
  }
  .dark .shadow-custom-hover-dark {
    box-shadow: inset 6px 6px 12px #1a202c, inset -6px -6px 12px #3a4b6b;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #94c8e7, inset -5px -5px 10px #d4efff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #3a4b6b;
  }

  .shadow-inner-neumorphic-light {
    box-shadow: inset 3px 3px 6px #94c8e7, inset -3px -3px 6px #d4efff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #3a4b6b;
  }

  .shadow-small-neumorphic-light {
    box-shadow: 3px 3px 6px #94c8e7, -3px -3px 6px #d4efff;
  }
  .dark .shadow-small-neumorphic-dark {
    box-shadow: 3px 3px 6px #1a202c, -3px -3px 6px #3a4b6b;
  }
  .shadow-small-neumorphic-inset-light {
    box-shadow: inset 2px 2px 4px #94c8e7, inset -2px -2px 4px #d4efff;
  }
  .dark .shadow-small-neumorphic-inset-dark {
    box-shadow: inset 2px 2px 4px #1a202c, inset -2px -2px 4px #3a4b6b;
  }

  .shadow-neumorphic-circle-light {
    box-shadow: 2px 2px 5px #94c8e7, -2px -2px 5px #d4efff;
  }
  .dark .shadow-neumorphic-circle-dark {
    box-shadow: 2px 2px 5px #1a202c, -2px -2px 5px #3a4b6b;
  }

  .shadow-neumorphic-thumb-light {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-thumb-dark {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(60, 60, 60, 0.7);
  }
<\/style>

Art Deco Grayscale User Profiles Component

A responsive user profiles component with an Art Deco geometric grayscale design, suitable for job boards or career platforms, including dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- User Profile Card 1 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <!-- Art Deco Border Element -->
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile of Jane Doe" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Jane Doe</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Senior Software Engineer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            San Francisco, CA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            5+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">React</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Node.js</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">AWS</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile of John Smith" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">John Smith</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Product Manager</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            New York, NY
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            8+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Agile</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Roadmapping</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Market Analysis</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 3 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile of Sarah Lee" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Sarah Lee</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">UX Designer</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Austin, TX
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Contract
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            6+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Figma</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">User Research</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Prototyping</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

    <!-- User Profile Card 4 -->
    <div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
      <div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
      <div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
      <div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>

      <div class="relative p-6 pt-12 text-center z-20">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile of David Chen" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">David Chen</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Data Scientist</p>

        <div class="mb-6 text-left">
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
            Seattle, WA
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
            Full-time
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300">
            <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
            4+ Years Experience
          </div>
        </div>

        <div class="flex flex-wrap justify-center mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Python</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Machine Learning</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">SQL</span>
        </div>

        <a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
      </div>
    </div>

  </div>
</div>

User Profiles Component

A responsive user profiles component for non-profit/charity organizations, featuring a luxury/premium design with professional blue tones, dark mode support, and sophisticated typography.

Open Preview

                <section class="py-12 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold tracking-tight text-blue-800 dark:text-blue-400 sm:text-5xl">
        Meet Our Dedicated Team
      </h2>
      <p class="mt-4 text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
        Our passionate individuals are committed to making a difference. Learn more about the people behind our mission.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Executive Director</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Alice leads our organization with a vision for positive change, driving initiatives and partnerships.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Stevens">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Mark Stevens</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Head of Programs</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Mark designs and implements our core programs, ensuring maximum impact on the communities we serve.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Sarah Kim">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Sarah Kim</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Community Outreach Manager</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Sarah connects us with communities, building relationships and understanding local needs for effective support.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="David Lee">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">David Lee</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Volunteer Coordinator</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              David manages our amazing volunteers, ensuring they are well-supported and effectively deployed.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Emily White">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Emily White</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Events & Fundraising Manager</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Emily orchestrates our fundraising events, engaging donors and raising vital funds for our causes.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Michael Brown">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Michael Brown</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Communications Specialist</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Michael shares our story with the world, crafting compelling narratives and engaging content.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Glassmorphism User Profiles Component (Simple)

A simple, responsive user profile component with a glassmorphism design style, pastel color scheme, and dark mode support. Ideal for entertainment/media platforms.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/50 dark:border-gray-700/50 relative overflow-hidden">
    
    <!-- Background Blur Effect (for glassmorphism) -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:animate-blob-dark"></div>
      <div class="absolute top-0 right-0 w-32 h-32 bg-pink-300 dark:bg-pink-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:animate-blob-dark dark:animation-delay-2000"></div>
      <div class="absolute bottom-0 left-1/2 w-32 h-32 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:animate-blob-dark dark:animation-delay-4000"></div>
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <img class="w-24 h-24 rounded-full border-4 border-white/70 dark:border-gray-600/70 shadow-lg object-cover mb-4"
        src="https://randomuser.me/api/portraits/women/68.jpg"
        alt="User Avatar">

      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1 tracking-wide">
        Alice Johnson
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 font-medium">
        Premium User
      </p>

      <div class="flex space-x-6 mb-6">
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Followers</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">500</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Following</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">25</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Playlists</span>
        </div>
      </div>

      <button class="w-full py-3 px-6 rounded-xl bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                     text-white font-semibold text-lg shadow-md 
                     hover:from-purple-500 hover:to-pink-500 dark:hover:from-purple-700 dark:hover:to-pink-700 
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-300 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-700/50 
                     transition-all duration-300 transform hover:-translate-y-0.5">
        View Profile
      </button>
    </div>
  </div>
</div>

<!-- To make the background blobs animate, you'd typically add a CSS @keyframes in a <style> tag or global CSS. For Tailwind, you can extend the config. -->
<!-- Example for tailwind.config.js (not part of the HTML output, but for context): -->
<!--
  theme: {
    extend: {
      keyframes: {
        blob: {
          '0%, 100%': {
            transform: 'translate(0px, 0px) scale(1)'
          },
          '33%': {
            transform: 'translate(30px, -50px) scale(1.1)'
          },
          '66%': {
            transform: 'translate(-20px, 20px) scale(0.9)'
          }
        }
      },
      animation: {
        blob: 'blob 7s infinite ease-in-out',
        'blob-dark': 'blob 10s infinite ease-in-out'
      }
    }
  }
-->

User Profiles Component

A complex, 3D-inspired user profile component designed for booking/reservation systems, featuring cool neutrals, responsiveness, and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- Profile Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Jane Doe</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Senior Stylist</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Highly experienced stylist specializing in modern cuts and vibrant color treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>5 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Certified</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <!-- 3D effect layers -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">John Smith</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Master Barber</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Dedicated master barber with a keen eye for classic and contemporary men's grooming.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>8 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Awarded</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Emily White</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Esthetician</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Expert esthetician, passionate about skincare and providing rejuvenating facial treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>3 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Licensed</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

  </div>
</div>

User Profiles Component - Dark Forest Theme

A simple, responsive user profile component designed for real estate platforms, featuring a dark forest-green color scheme and full dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden max-w-sm sm:max-w-md md:max-w-lg w-full transform transition duration-500 hover:scale-105">
    <div class="relative h-32 sm:h-48 md:h-56 bg-gradient-to-br from-green-700 to-green-900 dark:from-green-800 dark:to-green-950">
      <img class="absolute inset-0 w-full h-full object-cover opacity-30" src="https://picsum.photos/600/350?random=1" alt="Background foliage">
      <div class="absolute inset-0 flex items-center justify-center">
        <img class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover transform translate-y-8 sm:translate-y-12 md:translate-y-16" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture">
      </div>
    </div>
    <div class="pt-12 pb-6 px-6 sm:pt-16 sm:pb-8 sm:px-8 text-center">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
      <p class="text-md sm:text-lg text-green-700 dark:text-green-400 font-semibold mb-4">Real Estate Agent</p>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
        Dedicated real estate professional specializing in sustainable properties and luxury homes in the Green Valley area. Passionate about helping clients find their perfect home.
      </p>
      <div class="flex justify-center space-x-4 mb-6">
        <a href="#" class="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">
          View Listings
        </a>
        <a href="#" class="bg-transparent border border-green-600 dark:border-green-500 text-green-600 dark:text-green-500 hover:bg-green-50 dark:hover:bg-gray-700 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
          Contact
        </a>
      </div>
      <div class="grid grid-cols-2 gap-4 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
        <div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
          <span class="font-medium text-gray-900 dark:text-white mr-1">150+</span> Properties Sold
        </div>
        <div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
          <span class="font-medium text-gray-900 dark:text-white mr-1">12</span> Years Exp.
        </div>
      </div>
    </div>
  </div>
</div>

A responsive and professional user profiles component designed for cryptocurrency/blockchain applications, featuring a clean, trustworthy design with a complementary color scheme and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-12 text-gray-900 dark:text-white leading-tight">
      Blockchain Innovators
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-800 dark:to-indigo-800">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h3>
          <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">CEO, CryptoCorp</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Visionary leader driving innovation in decentralized finance and blockchain solutions.</p>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-teal-500 to-green-500 dark:from-teal-700 dark:to-green-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Jane Smith</h3>
          <p class="text-sm text-green-600 dark:text-green-400 mt-1">CTO, Decentralized Labs</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Lead architect for secure and scalable smart contract development and dApps.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Michael Chen</h3>
          <p class="text-sm text-red-600 dark:text-red-400 mt-1">Head of Research, QuantumChain</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Expert in cryptographic research and quantum-resistant blockchain technologies.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Emily White</h3>
          <p class="text-sm text-cyan-600 dark:text-cyan-400 mt-1">Community Manager, Ethos Network</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Engaging the blockchain community and fostering global adoption.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Cyberpunk_User_Profiles_Component

A complex, responsive user profiles component with a cyberpunk aesthetic and a warm sunset color scheme, suitable for travel/tourism websites. Features dark mode support, neon accents, and interactive elements.

Open Preview

                <div class="min-h-screen bg-gray-900 text-orange-200 p-4 sm:p-8 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Left Column: User Profile -->
    <div class="md:col-span-1 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl shadow-xl border border-purple-700 transform hover:scale-105 transition-all duration-300 dark:from-purple-950 dark:to-gray-900">
      <div class="p-6 sm:p-8 text-center relative">
        <div class="absolute top-4 right-4 flex space-x-2">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
          </span>
          <span class="text-xs font-mono text-orange-400">STATUS: ONLINE</span>
        </div>
        <img class="w-32 h-32 rounded-full mx-auto border-4 border-orange-500 shadow-lg glow-effect-orange mb-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <h2 class="text-3xl font-bold text-orange-400 mb-2 font-mono">AURORA_SKYWALKER</h2>
        <p class="text-sm text-purple-300 mb-4">Cyber-Explorer | Data-Nomad | Pixel-Poet</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fas fa-envelope"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-twitter"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-instagram"></i></a>
        </div>
        <div class="text-left space-y-3">
          <div class="border-t border-purple-800 pt-4 flex items-center space-x-2">
            <i class="fas fa-map-marker-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Location: Neo-Vegas Sector 7</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-calendar-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Member Since: 2077.01.15</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-star text-orange-500"></i>
            <span class="text-sm text-indigo-300">Rating: 4.8 / 5.0 (2,104 reviews)</span>
          </div>
        </div>
        <button class="mt-8 px-6 py-3 bg-orange-600 text-white rounded-full text-lg font-bold uppercase tracking-wider shadow-lg transform hover:scale-105 hover:bg-orange-700 transition-all duration-300 glow-button-orange focus:outline-none focus:ring-4 focus:ring-orange-500 focus:ring-opacity-75">
          Edit Profile
        </button>
      </div>
    </div>

    <!-- Right Column: Stats & Activity -->
    <div class="md:col-span-2 space-y-8">
      <!-- Navigation Tabs -->
      <div class="bg-gradient-to-r from-red-800 to-orange-800 rounded-3xl p-2 shadow-xl border border-red-700 dark:from-red-950 dark:to-orange-900">
        <div class="flex flex-wrap justify-around text-sm sm:text-base font-bold font-mono">
          <a href="#" class="px-4 py-2 text-white glow-text-white-active rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105 active:bg-orange-900 active:ring-2 active:ring-orange-500">Dashboard</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Bookings</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Trips</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Reviews</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Settings</a>
        </div>
      </div>

      <!-- Stats Section -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-orange-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-plane-departure text-orange-400 text-3xl mb-3 glow-effect-orange-sm"></i>
          <p class="text-2xl font-bold font-mono text-orange-300">17</p>
          <p class="text-sm text-gray-400">Total Expeditions</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-purple-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-map-marked-alt text-purple-400 text-3xl mb-3 glow-effect-purple-sm"></i>
          <p class="text-2xl font-bold font-mono text-purple-300">5</p>
          <p class="text-sm text-gray-400">Planetary Zones</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-red-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-hourglass-half text-red-400 text-3xl mb-3 glow-effect-red-sm"></i>
          <p class="text-2xl font-bold font-mono text-red-300">234</p>
          <p class="text-sm text-gray-400">Hours Logged</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-green-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-users text-green-400 text-3xl mb-3 glow-effect-green-sm"></i>
          <p class="text-2xl font-bold font-mono text-green-300">12</p>
          <p class="text-sm text-gray-400">Travel Buddies</p>
        </div>
      </div>

      <!-- Recent Activity / Upcoming Bookings -->
      <div class="bg-gradient-to-br from-gray-800 to-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl border border-gray-700 dark:from-gray-900 dark:to-gray-900">
        <h3 class="text-2xl font-bold font-mono text-orange-400 mb-6 glow-text-orange">RECENT SYNAPSE LOGS</h3>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-orange-500 shadow-md glow-effect-orange-sm">
              <img src="https://picsum.photos/id/1040/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-orange-300 mb-1">Trip to Kepler-186f: Red Canopy Forests</p>
              <p class="text-sm text-gray-400">Departure: 2083.05.20 <span class="text-purple-400">//</span> Status: <span class="text-green-400">COMPLETED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #KX93F-AX7</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-purple-700 transition-colors duration-200 glow-button-purple focus:outline-none focus:ring-2 focus:ring-purple-500">
              View Details
            </button>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-purple-500 shadow-md glow-effect-purple-sm">
              <img src="https://picsum.photos/id/1043/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-purple-300 mb-1">Lunar Base Alpha: Gravity Chamber Training</p>
              <p class="text-sm text-gray-400">Departure: 2084.01.10 <span class="text-orange-400">//</span> Status: <span class="text-red-400">PENDING APPROVAL</span></p>
              <p class="text-xs text-gray-500">Booking ID: #LBX2C-Y-4</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-orange-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-orange-700 transition-colors duration-200 glow-button-orange focus:outline-none focus:ring-2 focus:ring-orange-500">
              Modify Booking
            </button>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-red-500 shadow-md glow-effect-red-sm">
              <img src="https://picsum.photos/id/1051/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-red-300 mb-1">Mars Colonization Project: Phase 3 Briefing</p>
              <p class="text-sm text-gray-400">Departure: 2085.03.15 <span class="text-indigo-400">//</span> Status: <span class="text-yellow-400">CONFIRMED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #MCP7E-Z1</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-indigo-700 transition-colors duration-200 glow-button-indigo focus:outline-none focus:ring-2 focus:ring-indigo-500">
              View Itinerary
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom Glow Effects (using pseudo-elements or custom classes) -->
  <style>
    .glow-effect-orange {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.5);
    }
    .glow-effect-orange-sm {
      filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.6));
    }
    .glow-button-orange {
      box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
    }
    .glow-button-orange:hover {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
    }

    .glow-effect-purple-sm {
      filter: drop-shadow(0 0 5px rgba(128, 0, 128, 0.6));
    }
    .glow-button-purple {
      box-shadow: 0 0 8px rgba(128, 0, 128, 0.7);
    }
    .glow-button-purple:hover {
      box-shadow: 0 0 15px rgba(128, 0, 128, 0.9);
    }

    .glow-effect-red-sm {
      filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6));
    }
    .glow-button-red {
      box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-button-indigo {
      box-shadow: 0 0 8px rgba(79, 70, 229, 0.7);
    }
    .glow-button-indigo:hover {
      box-shadow: 0 0 15px rgba(79, 70, 229, 0.9);
    }

    .glow-effect-green-sm {
      filter: drop-shadow(0 0 5px rgba(0, 128, 0, 0.6));
    }

    .glow-text-orange {
      text-shadow: 0 0 8px rgba(255, 165, 0, 0.8);
    }
    .glow-text-white-active {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }
  </style>

  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

User Profiles Component

A simple, responsive user profile component with a watercolor/artistic style and a gradient rainbow color scheme, suitable for marketplace platforms. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 relative group">
    <!-- Artistic Top Shape -->
    <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-r from-red-400 via-yellow-400 to-green-400 dark:from-red-700 dark:via-yellow-700 dark:to-green-700 opacity-70 clip-path-polygon-alt rounded-t-3xl">
      <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <filter id="watercolor-effect">
            <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5" result="noise"/>
            <feDiffuseLighting in="noise" lightingColor="white" surfaceScale="2" result="diffuse"/>
            <feBlend in="SourceGraphic" in2="diffuse" mode="multiply"/>
          </filter>
        </defs>
        <rect width="100" height="100" fill="#FFF" filter="url(#watercolor-effect)" opacity="0.1"/>
      </svg>
    </div>

    <div class="relative p-6 pt-20 text-center">
      <!-- Profile Picture -->
      <div class="w-32 h-32 mx-auto rounded-full border-4 border-white dark:border-gray-700 overflow-hidden shadow-lg transform -translate-y-1/2 group-hover:scale-110 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-full h-full object-cover">
      </div>

      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white -mt-8 mb-2 leading-tight">
        Anya Petrova
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300 font-medium mb-4">
        Digital Artist & Illustrator
      </p>

      <div class="max-w-xs mx-auto mb-6 text-gray-700 dark:text-gray-400 text-sm leading-relaxed">
        Creating vibrant worlds through watercolors and digital strokes for a unique artistic experience.
      </div>

      <div class="flex justify-center flex-wrap gap-3 mb-6">
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-blue-400 to-indigo-400 text-white shadow-md
                     hover:from-blue-500 hover:to-indigo-500 transition duration-200">
          Watercolor
        </span>
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-green-400 to-teal-400 text-white shadow-md
                     hover:from-green-500 hover:to-teal-500 transition duration-200">
          Illustrations
        </span>
        <span class="px-4 py-1.5 rounded-full text-sm font-semibold whitespace-nowrap
                     bg-gradient-to-r from-purple-400 to-pink-400 text-white shadow-md
                     hover:from-purple-500 hover:to-pink-500 transition duration-200">
          Portraits
        </span>
      </div>

      <a href="#" class="inline-block px-8 py-3 rounded-full text-lg font-bold
                 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white shadow-lg
                 hover:shadow-xl hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600
                 transform hover:-translate-y-0.5 transition duration-300 ease-in-out
                 focus:outline-none focus:ring-4 focus:ring-purple-300 focus:ring-opacity-75 dark:focus:ring-purple-700">
        View Gallery
      </a>
    </div>

    <!-- Artistic Bottom Shape -->
    <div class="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-l from-orange-400 via-yellow-400 to-red-400 dark:from-orange-700 dark:via-yellow-700 dark:to-red-700 opacity-60 clip-path-polygon-alt-bottom rounded-b-3xl">
      <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <rect width="100" height="100" fill="#FFF" filter="url(#watercolor-effect)" opacity="0.1"/>
      </svg>
    </div>
  </div>
</div>

<style>
  /* This is an additional style block for custom clip-path properties, 
     as Tailwind currently doesn't support complex clip-path values directly 
     via utility classes without custom configuration. 
     In a real project, this would likely be in a global CSS file or configured 
     via Tailwind's theme extends. */
  .clip-path-polygon-alt {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 85%, 50% 70%, 25% 85%, 0 70%);
  }
  .clip-path-polygon-alt-bottom {
    clip-path: polygon(0% 30%, 25% 15%, 50% 30%, 75% 15%, 100% 30%, 100% 100%, 0% 100%);
  }
</style>

User Profiles Component

A complex, responsive user profiles component for news/journalism websites, featuring a Bauhaus-inspired design with a bright candy/sweet color scheme and dark mode support. Displays multiple user profiles with profile pictures, names, titles, and follower counts, designed for a rich interface.

Open Preview

                <div class="font-sans bg-pink-100 text-purple-900 min-h-screen p-4 sm:p-8 dark:bg-purple-900 dark:text-pink-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto py-8 sm:py-12 lg:py-16">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-8 sm:mb-12 dark:text-pink-300 tracking-tight leading-tight uppercase relative">
      <span class="block">Our Esteemed Contributors</span>
      <span class="block text-2xl sm:text-3xl text-purple-600 dark:text-pink-200 mt-2 font-medium">Meet the Minds Behind the Stories</span>
      <div class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-purple-500 dark:bg-pink-400 mt-4 rounded-full"></div>
    </h1>

    <p class="text-center text-lg sm:text-xl mb-12 sm:mb-16 max-w-3xl mx-auto dark:text-purple-200">
      Discover the talented individuals who bring you the latest news and in-depth analysis. Each profile offers a glimpse into their expertise and contributions.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">

      <!-- Profile Card 1 -->
      <article class="relative bg-gradient-to-br from-pink-300 to-red-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-indigo-600 dark:to-blue-800">
        <div class="absolute inset-0 bg-pink-400 opacity-20 dark:bg-blue-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Jane Doe</h2>
          <p class="text-lg text-pink-900 font-semibold mb-3 dark:text-purple-300">Senior Journalist</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">5.2K Followers</span>
          </div>
          <p class="text-sm text-pink-900 mb-6 line-clamp-3 dark:text-purple-200">Specializing in investigative journalism and political analysis. Jane has been breaking stories for over a decade...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-300 transform hover:scale-105 transition-all duration-200 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 2 -->
      <article class="relative bg-gradient-to-br from-blue-300 to-green-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-pink-600 dark:to-orange-800">
         <div class="absolute inset-0 bg-blue-400 opacity-20 dark:bg-orange-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Profile of John Smith">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">John Smith</h2>
          <p class="text-lg text-blue-900 font-semibold mb-3 dark:text-purple-300">Tech Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">8.1K Followers</span>
          </div>
          <p class="text-sm text-blue-900 mb-6 line-clamp-3 dark:text-purple-200">Covering the latest in gadgets, software, and digital trends. John's insights are always cutting-edge...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-green-600 text-white font-bold rounded-full shadow-lg hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 transform hover:scale-105 transition-all duration-200 dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 3 -->
      <article class="relative bg-gradient-to-br from-yellow-300 to-orange-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-green-600 dark:to-teal-800">
         <div class="absolute inset-0 bg-yellow-400 opacity-20 dark:bg-teal-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile of Emily White">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Emily White</h2>
          <p class="text-lg text-orange-900 font-semibold mb-3 dark:text-purple-300">Culture Reporter</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">3.9K Followers</span>
          </div>
          <p class="text-sm text-orange-900 mb-6 line-clamp-3 dark:text-purple-200">Exploring arts, entertainment, and social trends. Emily brings a fresh perspective to cultural discourse...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-orange-600 text-white font-bold rounded-full shadow-lg hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 transform hover:scale-105 transition-all duration-200 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 4 -->
      <article class="relative bg-gradient-to-br from-purple-300 to-indigo-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-red-600 dark:to-yellow-800">
         <div class="absolute inset-0 bg-purple-400 opacity-20 dark:bg-yellow-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile of David Lee">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">David Lee</h2>
          <p class="text-lg text-indigo-900 font-semibold mb-3 dark:text-purple-300">Sports Analyst</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">6.7K Followers</span>
          </div>
          <p class="text-sm text-indigo-900 mb-6 line-clamp-3 dark:text-purple-200">Providing expert analysis on global sports events. David's predictions are a must-read for any fan...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white font-bold rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 transform hover:scale-105 transition-all duration-200 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 5 -->
      <article class="relative bg-gradient-to-br from-teal-300 to-cyan-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-purple-600 dark:to-fuchsia-800">
         <div class="absolute inset-0 bg-teal-400 opacity-20 dark:bg-fuchsia-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/women/72.jpg" alt="Profile of Sarah Chen">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Sarah Chen</h2>
          <p class="text-lg text-cyan-900 font-semibold mb-3 dark:text-purple-300">Economics Correspondent</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">4.5K Followers</span>
          </div>
          <p class="text-sm text-cyan-900 mb-6 line-clamp-3 dark:text-purple-200">Reporting on global market trends and economic policies. Sarah's analysis clarifies complex financial news...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-cyan-600 text-white font-bold rounded-full shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 transform hover:scale-105 transition-all duration-200 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 dark:focus:ring-fuchsia-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

      <!-- Profile Card 6 -->
      <article class="relative bg-gradient-to-br from-lime-300 to-emerald-400 p-6 rounded-3xl shadow-xl hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 group overflow-hidden dark:from-cyan-600 dark:to-lime-800">
         <div class="absolute inset-0 bg-lime-400 opacity-20 dark:bg-lime-700 dark:opacity-20 rounded-3xl pointer-events-none"></div>
        <div class="relative z-10 flex flex-col items-center text-center">
          <img class="w-32 h-32 rounded-full border-4 border-white dark:border-purple-200 shadow-lg mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Profile of Mark Johnson">
          <h2 class="text-3xl font-extrabold text-white mb-1 group-hover:text-purple-900 dark:group-hover:text-pink-200 transition-colors duration-300">Mark Johnson</h2>
          <p class="text-lg text-emerald-900 font-semibold mb-3 dark:text-purple-300">Science Editor</p>
          <div class="flex items-center text-white mb-4">
            <svg class="w-5 h-5 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.264-4.296-15.56 0A7.942 7.942 0 0110 3.778c4.296 4.296 4.296 11.264 0 15.56a7.942 7.942 0 01-7.778-7.778c-4.296-4.296-4.296-11.264 0-15.56z" clip-rule="evenodd"></path><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM12 11.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>
            <span class="text-yellow-100 font-bold">7.0K Followers</span>
          </div>
          <p class="text-sm text-emerald-900 mb-6 line-clamp-3 dark:text-purple-200">Breaking down complex scientific discoveries into understandable news. Mark's passion for science is infectious...</p>
          <a href="#" class="inline-flex items-center px-6 py-3 bg-emerald-600 text-white font-bold rounded-full shadow-lg hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-300 transform hover:scale-105 transition-all duration-200 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
            View Profile
            <svg class="w-4 h-4 ml-2" 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="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </article>

    </div>

     <div class="flex justify-center mt-12 sm:mt-16">
        <button class="px-8 py-4 bg-purple-600 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-300 transform hover:scale-105 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-400">
            Load More Contributors
        </button>
    </div>
  </div>
</div>

Search Components

Categories

User Profiles