Home
Rajesh Maheshwari
Profile Card

Profile Card

Responsive modern profile card

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author Rajesh Maheshwari

823

Fork Fullscreen

<body class="flex items-center justify-center min-h-screen p-4 bg-black">
  <div class="max-w-md w-full bg-white rounded-2xl overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
    
    <div class="h-32 bg-gradient-to-r from-purple-500 to-indigo-600 relative">
      <div class="absolute -bottom-12 left-1/2 transform -translate-x-1/2">
        <img class="h-24 w-24 rounded-full border-4 border-white object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" alt="Profile picture">
      </div>
    </div>
    
    
    <div class="pt-16 pb-8 px-6 text-center">
      <h3 class="text-xl font-bold text-gray-800">Sarah Johnson</h3>
      <p class="text-indigo-600 font-medium">Senior Product Designer</p>
      <p class="text-gray-500 mt-2">Creating user-centered designs that solve real problems. Passionate about accessibility and inclusive design.</p>
      
      
      <div class="flex justify-center space-x-6 mt-6">
        <div class="text-center">
          <p class="text-2xl font-bold text-gray-800">142</p>
          <p class="text-sm text-gray-500">Projects</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-gray-800">24.5K</p>
          <p class="text-sm text-gray-500">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-gray-800">562</p>
          <p class="text-sm text-gray-500">Following</p>
        </div>
      </div>
      
      
      <div class="mt-8 flex justify-center space-x-3">
        <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">
          Follow
        </button>
        <button class="flex-1 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">
          Message
        </button>
      </div>
      
      
      <div class="mt-8 flex justify-center space-x-5">
        <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors duration-200">
          <i class="fab fa-twitter text-xl"></i>
        </a>
        <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors duration-200">
          <i class="fab fa-linkedin-in text-xl"></i>
        </a>
        <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors duration-200">
          <i class="fab fa-dribbble text-xl"></i>
        </a>
        <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors duration-200">
          <i class="fab fa-github text-xl"></i>
        </a>
        <a href="#" class="text-gray-400 hover:text-indigo-500 transition-colors duration-200">
          <i class="fab fa-instagram text-xl"></i>
        </a>
      </div>
    </div>
    
    
    <div class="px-6 pb-8">
      <div class="flex flex-wrap gap-2">
        <span class="px-3 py-1 bg-indigo-100 text-indigo-600 text-sm font-medium rounded-full">UI/UX</span>
        <span class="px-3 py-1 bg-indigo-100 text-indigo-600 text-sm font-medium rounded-full">Figma</span>
        <span class="px-3 py-1 bg-indigo-100 text-indigo-600 text-sm font-medium rounded-full">Prototyping</span>
        <span class="px-3 py-1 bg-indigo-100 text-indigo-600 text-sm font-medium rounded-full">Wireframing</span>
        <span class="px-3 py-1 bg-indigo-100 text-indigo-600 text-sm font-medium rounded-full">User Research</span>
      </div>
    </div>
  </div>
</body>

Related Examples