Create a User profile card in Tailwind CSS

Last Updated : 24 Apr, 2025

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>