Create a User profile card in Tailwind CSS

Last Updated : 21 Mar, 2024

User profile cards are a common UI element used to display information about an individual in a visually appealing way. These cards are often utilized on social media platforms, blogs, and various other websites. In this article, we’ll explore a simple approach to creating a user profile card using Tailwind CSS, a popular utility-first CSS framework.

Screenshot-2024-02-26-132752

Approach:

Begin with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.
Import external resources like Tailwind CSS and Font Awesome for styling and icons.
Create a card container with Tailwind CSS classes for styling, including a background color, rounded corners, and a shadow effect.
Insert an image tag for the profile picture, applying Tailwind CSS classes for sizing, positioning, and styling.
Add the user’s name and a brief description. Include social media icons with Font Awesome classes, each linked to the respective platform.

Example: Implementation to create a user profile card.

HTML

<!-- index.html  -->
<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Profile Card</title> 
    <script src="https://cdn.tailwindcss.com"></script> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/> 
</head> 
  
<body class="flex justify-center  
             items-center h-screen bg-gray-200"> 
    <!--Profile card start-->
    <div class="card bg-white w-96 overflow-hidden  
                rounded-lg shadow-lg flex flex-col"> 
        <div class="card-image"> 
            <img src= 
&quothttps://media.geeksforgeeks.org/wp-content/uploads/20240321164039/image.jpg" 
                 alt="Image" 
                 class="w-full h-48 object-cover rounded-t-lg" /> 
        </div> 
        <div class="profile-image"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240226132217/w2.png" 
                 alt=""
                 class="z-10 w-24 h-24 relative mx-auto -mt-16  
                        block rounded-full border-4 border-white  
                        transition-transform duration-400  
                        transform hover:scale-110" /> 
        </div> 
        <div class="card-content text-center py-4"> 
            <h3 class="text-xl font-semibold">Prerna</h3> 
            <p class="text-sm text-justify px-4"> 
                Prerna Gupta is a software engineer who recently 
                got a job at Uber. She has strong problem-solving 
                skills and attributes her success to the resources 
                and community at GeeksforGeeks. 
            </p> 
        </div> 
        <div class="icons flex justify-center pb-8"> 
            <a href="#" class="fab fa-facebook-f text-2xl mx-2"></a> 
            <a href="#" class="fab fa-youtube text-2xl mx-2"></a> 
            <a href="#" class="fab fa-instagram text-2xl mx-2"></a> 
            <a href="#" class="fab fa-twitter text-2xl mx-2"></a> 
            <a href="#" class="fab fa-whatsapp text-2xl mx-2"></a> 
        </div> 
    </div> 
    <!--Profile card end-->
</body> 
  
</html>