Card

Profile Card

This tailwind example is contributed by Manuel Dala, on 22-Apr-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author Manuel Dala

Tailwind v3.4 1.7k 4

Fork Fullscreen

<div class="flex items-center justify-center min-h-screen bg-gray-100">
  
  <div class="w-full max-w-md mx-4 bg-white rounded-xl shadow-lg overflow-hidden md:max-w-2xl">
    
    <div class="h-2 bg-gradient-to-r from-blue-500 to-cyan-400"></div>
    
    
    <div class="p-8">
      
      <div class="flex items-center">
        
        <div class="flex-shrink-0">
          <div class="flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full">
            <span class="text-2xl font-bold text-blue-600">MD</span>
          </div>
        </div>
        
        
        <div class="ml-4">
          <h2 class="text-xl font-bold text-gray-800">Manuel Dala</h2>
          <p class="text-blue-600">Software Engineer</p>
        </div>
      </div>
      
      
      <div class="my-6 border-t border-gray-200"></div>
      
      
      <div class="space-y-4">
        
        <div class="flex items-center">
          <div class="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-gray-500">Phone</p>
            <p class="text-gray-700">+244 941 540 352</p>
          </div>
        </div>
        
        
        <div class="flex items-center">
          <div class="flex items-center justify-center w-10 h-10 bg-blue-50 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-gray-500">Email</p>
            <p class="text-gray-700">manueljosedala@hotmail.com</p>
          </div>
        </div>
      </div>
      
      
      <div class="mt-8">
        <h3 class="text-sm font-medium text-gray-500 mb-3">Connect with me</h3>
        <div class="flex space-x-4">
          <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-100 transition-colors">
            <svg class="w-5 h-5 text-gray-600" 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.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-100 transition-colors">
            <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 16.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 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.072 4.072 0 012.8 9.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" />
            </svg>
          </a>
          <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-100 transition-colors">
            <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-100 transition-colors">
            <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.167 6.839 9.489.5.092.682-.167.682-.376.682-.773 0-1.417-.417-1.652-1.088-.158-.532-.756-1.006-1.403-1.225-.484-.197-.796-.682-.796-1.262 0-1.007.682-1.814 1.576-1.814.876 0 1.576.776 1.576 1.74 0 .545-.197 1.127-.417 1.515-.139.287.107.594.466.594.287 0 .545-.158.723-.376.227-.347.545-.853.853-1.515.227-.545.227-1.127.227-1.662 0-.853-.287-1.433-.853-1.933-.545-.545-1.305-.853-2.125-.853-1.662 0-2.847 1.127-2.847 2.604 0 .545.158 1.127.466 1.515.107.158.107.287.107.466-.107.197-.545.227-.853.08C3.317 13.9 2.5 12.1 2.5 10.1c0-2.604 1.933-5.015 5.015-5.015 2.604 0 4.42 1.853 4.42 4.42 0 2.847-1.662 4.943-3.96 4.943-.773 0-1.515-.227-1.733-.545-.197-.227-.197-.545-.197-.853.158-.545.545-1.127.853-1.515.227-.227.466-.466.723-.723.227-.227.287-.545.287-.853 0-.545-.227-1.127-.545-1.515-.227-.227-.545-.466-.853-.545.227-.08.545-.227.853-.227.545 0 1.127.227 1.515.545.853.853 1.305 2.125 1.305 3.395 0 1.127-.287 2.287-.853 3.247-.545.853-1.305 1.515-2.287 1.933.853.227 1.733.347 2.604.347 4.42 0 8.167-3.567 8.167-8.167C22 6.477 17.523 2 12 2z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.7k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.5k
User profile card with Cover Image

Noob

3 years ago

33.8k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.4k
User profile card

Mr Robot

3 years ago

12k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

7.6k