Learn to build a stylish and modern profile card using HTML and Tailwind CSS. Simple steps, responsive design, and glowing button effect included.
Table of Contents
Now that we have the layout, we’ll move to CSS styling. Even though we are using Tailwind CSS for most of the design, we still need some custom CSS. Let’s go line by line to understand what each part does.
A profile card is a small section that shows details about a person like their photo, name, role, or a short bio. You often see these on websites, portfolios, or contact pages.
In this blog, we will show you how to create a modern profile card using HTML and Tailwind CSS. It will include a smooth glowing button, background image, and clean text styling. This design works well on desktops and mobile phones.
Prerequisites
Before we start, make sure you have the following:
- Basic knowledge of HTML and CSS
- Internet connection to load the Tailwind CSS CDN
- A simple code editor like VS Code or Notepad++
- A browser to test your design
Source Code
Step 1 (HTML Code):
To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our profile card. Let’s go through the code step by step:
1. <!DOCTYPE html>
- This line tells the browser we are using HTML5 — the latest version of HTML.
2. <html lang="en">
- This starts the HTML page and sets the language to English.
3. <head> section
Everything inside <head> helps set up the page’s settings:
<meta charset="UTF-8" />
Sets the character format so the page can display all characters properly.<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Makes the design responsive for all screen sizes (mobile, tablet, desktop).<title>Profile Card</title>
The title shown in the browser tab.- Tailwind CSS
Adds the Tailwind CSS library to help style the page easily using utility classes.<link href="https://cdn.jsdelivr.net/.../tailwind.min.css" rel="stylesheet"> - Google Fonts (Inter)
Loads a clean and modern font called Inter from Google Fonts. <link rel="stylesheet" href="styles.css">
Links to an external CSS file (you can add extra styles there).
4. <body class="flex items-center justify-center min-h-screen">
- Makes the body a flexbox container.
- Vertically and horizontally centers everything.
- min-h-screen ensures it takes full height of the screen.
5. <div class="card">
- Starts the profile card container.
6. <div class="card-content">
- Contains all the content inside the card.
7. Name and Verified Badge
<h2>Natasha Romanoff <img src="verified.png"></h2>- Shows the name Natasha Romanoff.
- Next to the name is a small image of a verified badge (just like Twitter or Instagram).
8. Profile Description
<p>I’m a Brand Designer who focuses on clarity & emotional connection.</p>- A short line telling what Natasha does.
9. Stats Section (Rating, Earnings, Rate)
<div class="flex justify-between"> ... </div>Inside this section:
- Rating
- Image of a star
- Shows "4.8" and the word "Rating"
- Earnings
- Shows "$45k+" and the word "Earned"
- Rate
- Shows "$50/hr" and the word "Rate"
All parts are separated by thin vertical borders using:
<p class="border-r ..."></p>10. Buttons Section
<div class="grid grid-cols-4 gap-2">...</div>This is a 2-button area:
Button 1: Get In Touch
<button>Get In Touch</button>- White button with an email icon.
- Encourages users to contact Natasha.
Button 2: Bookmark
<button>...</button>- Small dark button with a bookmark icon (SVG).
- Could be used to save or favorite the profile.
Step 2 (CSS Code):
1. Body Styling
body {
background-color: #ffffff;
font-family: 'Inter', sans-serif;
}- background-color: #ffffff; — Sets the page background to white.
- font-family: 'Inter', sans-serif; — Uses the Inter font for all the text on the page. If it's not available, it will use a similar sans-serif font.
2. Card Styling
.card {
width: 290px;
height: 490px;
border-radius: 2rem;
overflow: hidden;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}- width and height — Sets the size of the card.
- border-radius: 2rem; — Rounds the corners to make the card look smooth.
- overflow: hidden; — Hides anything that goes outside the card’s borders.
- position: relative; — Allows child elements to be positioned relative to this card.
- box-shadow — Adds a soft shadow around the card, giving it a 3D effect.
3. Card Background Image
.card::before {
content: '';
position: absolute;
inset: 0;
background: url('profile-card-image.webp') center/cover no-repeat;
backface-visibility: hidden;
z-index: 1;
}- ::before — Creates a background layer inside the card.
- position: absolute; and inset: 0; — Makes this background cover the whole card.
- background — Loads an image from a URL, centers it, and stretches it to cover the card.
- backface-visibility: hidden; — Hides the back side of the element.
- z-index: 1; — Places this background behind the card’s content.
4. Card Content Styling
.card-content {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 1rem 1rem 1rem;
backdrop-filter: blur(2px);
background-color: transparent;
color: white;
z-index: 2;
}- position: absolute; and bottom: 0; — Places the content at the bottom of the card.
- width: 100%; — Makes it stretch across the card.
- padding — Adds space inside the content.
- backdrop-filter: blur(2px); — Blurs the background behind the content.
- color: white; — Makes the text color white.
- z-index: 2; — Keeps the content above the background image.
5. Button Padding
button {
padding: 11px 0px;
}- Adds top and bottom space to all buttons, making them easier to click.
6. Glow Button Effect
.glow-button {
transition: 0.3s ease-in-out;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
0 0 20px rgba(255, 255, 255, 0.4),
0 0 30px rgba(255, 255, 255, 0.3);
}- Adds a glowing effect to buttons with the .glow-button class.
- The transition makes the glow appear smoothly.
7. Glow on Hover
.glow-button:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4),
0 0 25px rgba(255, 255, 255, 0.5),
0 0 40px rgba(255, 255, 255, 0.6);
}- When you hover over the button, the glow becomes brighter and bigger.
body {
background-color: #ffffff;
font-family: 'Inter', sans-serif;
}
.card {
width: 290px;
height: 490px;
border-radius: 2rem;
overflow: hidden;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: url('https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/profile-card-image.webp')
center/cover no-repeat;
backface-visibility: hidden;
z-index: 1;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 1rem 1rem 1rem;
backdrop-filter: blur(2px);
background-color: transparent;
color: white;
z-index: 2;
}
button {
padding: 11px 0px;
}
.glow-button {
transition: 0.3s ease-in-out;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3),
0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.3);
}
.glow-button:hover {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4),
0 0 25px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.6);
} Final Output:
Conclusion:
With just a few lines of code and the power of Tailwind CSS, you created a clean, stylish, and modern profile card. This design can be used on portfolios, social links, or team pages. You can also update the image, name, or role to match your project.
Keep exploring Tailwind classes and add more animations or responsiveness to make your cards even better!
Inspired by: Abraham John
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
