Create a User profile card in Tailwind CSS
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.
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= "https://media.w3wiki.net/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.w3wiki.net/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 w3wiki. </ 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 > |
Output:
Contact Us