Search Components

User Profiles

Display of user information and activity

User Profiles Component

User Profiles Component with Brutalism design, Monochromatic color scheme, and Simple complexity for Social Media purpose.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism rounded-none overflow-hidden">
    <div class="p-6">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-3xl font-bold text-black dark:text-white uppercase">Profiles</h2>
        <svg class="w-8 h-8 text-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
      </div>
      
      <div class="space-y-6">
        <!-- Profile 1 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">John Doe</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>

        <!-- Profile 2 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Jane Smith</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Offline</p>
          </div>
        </div>

        <!-- Profile 3 -->
        <div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
          <img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div>
            <h3 class="text-xl font-bold text-black dark:text-white uppercase">Peter Jones</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutalism {
    box-shadow: 8px 8px 0px 0px rgba(255, 255, 255, 1);
  }
</style>

User Profiles Component

A User Profiles Component designed for a dark mode dashboard with pastel color scheme and moderate complexity features.

Open Preview

                <div class="bg-gray-900 text-gray-300 p-6 rounded-lg shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-center">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">John Doe</h3>
            <p class="text-center">Software Developer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Jane Smith</h3>
            <p class="text-center">Product Manager</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Michael Johnson</h3>
            <p class="text-center">UX Designer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- Add more user profiles as needed -->
    </div>
</div>

A User Profiles Component designed in a brutalist style with a triadic color scheme, featuring a moderate complexity suitable for blog/content consumption, and responsive design with dark theme support.

Open Preview

                <div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Profile 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
            <p class="text-gray-700 dark:text-gray-200">Content Writer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
            </p>
            <img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 2 -->
        <div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
            <p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
            </p>
            <img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 3 -->
        <div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
            <p class="text-gray-700 dark:text-gray-200">Web Developer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
            </p>
            <img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
    </div>
</div>

User Profiles Component

A User Profiles Component designed in a Brutalism style using Tailwind CSS, featuring a monochromatic color scheme and providing an interface for social networking. It supports dark mode and is responsive.

Open Preview

                <div class="flex flex-col items-center justify-center bg-gray-900 p-6 rounded-lg shadow-lg dark:bg-gray-800">
    <h1 class="text-4xl text-white font-bold mb-4">User Profiles</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">John Doe</h2>
                <p class="text-gray-400 text-center mb-2">@johndoe</p>
                <p class="text-gray-300 text-center">Web Developer<br>Based in San Francisco</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Jane Smith</h2>
                <p class="text-gray-400 text-center mb-2">@janesmith</p>
                <p class="text-gray-300 text-center">Graphic Designer<br>Based in New York</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Alex Johnson</h2>
                <p class="text-gray-400 text-center mb-2">@alexjohnson</p>
                <p class="text-gray-300 text-center">Content Creator<br>Based in Austin</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
    </div>
</div>

User Profiles Component

A responsive User Profile component using Tailwind CSS, with Material Design influences and a Monochromatic color scheme. Supports dark mode and displays user information, statistics, and recent activity.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="relative">
      <img class="w-full h-40 object-cover object-center" src="https://picsum.photos/seed/material/400/200" alt="Profile background">
      <div class="absolute inset-0 bg-blue-500 opacity-40"></div>
    </div>
    <div class="relative z-10 -mt-16 flex items-center justify-center">
      <img class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
    </div>
    <div class="text-center p-6">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-400">@johndoe</p>
      <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="flex justify-around border-t border-gray-200 dark:border-gray-700 py-4">
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">350</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-800 dark:text-white">2.5K</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Likes</p>
      </div>
    </div>
     <div class="p-6 border-t border-gray-200 dark:border-gray-700">
      <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h4>
      <ul class="space-y-4">
        <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Jane Smith</span> liked your post.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
          </div>
        </li>
         <li class="flex items-start">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User avatar">
          </div>
          <div class="ml-3">
            <p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Peter Jones</span> commented on your photo.</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">5 hours ago</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

User Profiles Component

A simple, responsive user profile component for e-commerce with microinteractions, complementing color scheme, dark mode support, and no JavaScript.

Open Preview

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-5 font-medium text-gray-900 dark:text-white">John Doe</p>
      <p class="text-sm leading-5 text-gray-600 dark:text-gray-400">Customer since 2023</p>
      <button class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 dark:bg-blue-700 dark:hover:bg-blue-600">View Profile</button>
    </div>
  </div>
</div>

User Profiles Component

A simple, responsive user profile component featuring microinteractions with a triadic color scheme, suitable for business or corporate websites.

Open Preview

                <div class="max-w-sm mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
    <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/seed/profile/400/200" alt="Profile Background">
    <div class="flex items-center mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-blue-500 dark:border-yellow-500" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="mt-4 flex justify-between">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400 transition-colors">View Profile</button>
        <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg dark:bg-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Message</button>
    </div>
</div>

User Profiles Component

Glassmorphism User Profile Component with Monochromatic color scheme and Simple complexity.

Open Preview

                
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <div class="px-6 py-8">
      <div class="flex justify-center">
        <img class="h-24 w-24 rounded-full border-4 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
      </div>
      <div class="mt-4 text-center">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-300">Web Developer</p>
      </div>
      <div class="mt-6 flex justify-center space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.917 3.187 9.165 7.62 10.692.55.1 1.05-.25 1.05-.56V20.23c-3.03.65-3.676-1.44-3.676-1.44-.59-.15-1.21-.45-1.44-.66-.42-.36-.33-.04-.05-.03.33.03.53.27.53.27.2 1.52 1.25 1.05 1.55.8.04-.63.23-1.05.42-1.29-2-.23-4.1-.1-4.1-4.42 0-.98.35-1.86 1.02-2.5.1-.21-.45-1.25.1-2.62 0 0 .84-.27 2.75 1.02.8-.23 1.65-.34 2.5-.35.85.01 1.7.12 2.5.35 1.9-.29 2.75-1.02 2.75-1.02.56 1.37.1 2.41.1 2.62.67.64 1.02 1.52 1.02 2.5 0 4.33-2.07 4.71-4.11 4.42-.29.25-.58.48-.9.69-.23.16-.5.2-.82.1-.48-.15-1.05.5-1.05.5V22.11c0 .31.5.66 1.05.5C19.818 21.182 23 16.934 23 12.017 23 6.484 18.522 2 13 2h-1z" clip-rule="evenodd"></path>
          </svg>
        </a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
             <path d="M8.29 20.251c7.5 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.523A8.134 8.134 0 0022 5.92a8.171 8.171 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.222 8.222 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

Neumorphism User Profiles Component with Vibrant colors

Neumorphism User Profiles Component with Vibrant colors for Business/Corporate websites, responsive design with dark theme support.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-10">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

    <!-- Profile Card 1 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-indigo-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

    <!-- Profile Card 2 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Jese Leos</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">Marketing Specialist</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-pink-600 rounded-lg hover:bg-pink-700 focus:ring-4 focus-outline-none focus:ring-pink-300 dark:bg-pink-500 dark:hover:bg-pink-600 dark:focus:ring-pink-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

    <!-- Profile Card 3 -->
    <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Bonnie image"/>
        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Robert Gough</h5>
        <span class="text-sm text-gray-500 dark:text-gray-400">Software Engineer</span>
        <div class="flex mt-4 space-x-3 md:mt-6">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-green-600 rounded-lg hover:bg-green-700 focus:ring-4 focus-outline-none focus:ring-green-300 dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-800 shadow-neumorphism-light dark:shadow-neumorphism-dark">View Profile</a>
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-gray-900 bg-gray-100 border border-gray-300 rounded-lg hover:bg-gray-200 focus:ring-4 focus-outline-none focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">Message</a>
        </div>
      </div>
    </div>

  </div>
</div>

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

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #666666;
}
</style>

User Profiles Component

A responsive user profile component with microinteractions, grayscale color scheme, complex layout, dark mode support, and random images/avatars.

Open Preview

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

Search Components

Categories

User Profiles