Easiest way to create Profile Card with Pure CSS

Today we are going to create a simplest and easiest Profile card to demonstrate the power of Vanila CSS. So we are not using any fancy libraries like Bootstrap or TailwindCSS. We are just focusing on creating it with pure CSS. This profile card is just for demonstration purpose and will display 3 basic components, first one is the Profile Image in circular form, second is statistics like, number of followers etc and third one is the Follow button. So let’s dive in.

Create a Basic Card

First of all let’s create a simple div which will be used as the background card of the Profile. We just have to specifiy the maximum background width, background color and justify content inside this card. Apply a simple border and you are good to go. Here is how the CSS will work.

.profile-card{
  background-color:#f7f7f7;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  max-width:300px;
  margin:auto;
  text-align:center;   
}
Code language: CSS (css)

and for the HTML it will be pretty simple like this

<div class="profile-card"></div>
Code language: HTML, XML (xml)

Add Profile Image Placeholder

Next thing is to add a profile Image, in this case we are using a simple Image Placeholder like this.

<div class="profile-card">
  <img src="https://via.placeholder.com/100" alt="User Image" class="profile-image">
</div>Code language: HTML, XML (xml)

Now to make it circular and proper alignment here is what CSS we used for the class profile-image.

.profile-image{
  border-radius:50%;
  width:100px;
  height:100px;
  object-fit:cover;
  margin-bottom:15px;
}Code language: CSS (css)

AS you can see, the border radius is 50% makes it circular shape and the 100px width and height will make the shape even. Little margin to the bottom will be applied for proper spacing.

Adding Stats to the Card

Now it is time to add a little stats to the card but before that let’s add user name and a little spacer to it. We can add this like this.

<div class="profile-card">
  <img src="https://via.placeholder.com/100" alt="User Image" class="profile-image">
   <h3 class="profile-name">John Doe</h3>
    <p class="profile-bio">Web Developer at Facebook. Passionate about coding and design.</p>
  
</div>Code language: JavaScript (javascript)

and for the spacer line we can use a border in the CSS like this.

.profile-name{
  font-size: 1.5rem;
  font-weight:600;
  color:#333;    
}
.profile-bio{
  font-size: 0.9rem;
  color: #666;
}Code language: CSS (css)

Now add the stats card,

<div class="profile-stats">
    <div class="profile-stat">
      500 <br/>
      <span class="stat-label">Posts</span>
    </div>
    <div class="profile-stat">
      1.2k <br/>
      <span class="stat-label">Followers</span>
    </div>
    <div class="profile-stat">
      350 <br/>
      <span class="stat-label">Following </span>
    </div>
</div>
  
Code language: HTML, XML (xml)

and for the CSS here is what you need.

.profile-stats{
  display:flex;
  justify-content: space-between;
  padding-top:15px;
  border-top: 1px solid #eaeaea;
  margin-top: 15px
}
 
.profile-stat{
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}
.stat-label {
  font-size: 0.8rem;
  color:#666;
}Code language: CSS (css)

Add follow button

Now it is time to add a Follow button. The code is pretty simple to make a button in CSS. We apply a simple button tag and then will modify it using CSS. Here is the button tag HTML code which is pretty straight forward.

<button class="btn follow-btn">Follow</button>Code language: HTML, XML (xml)

and for the CSS here is it.

.follow-btn{
  background-color: #1877f2;
  color: white;
  border-radius: 5px;
  padding: 8px 16px;
  margin-top: 15px;
  width: 100px;
  font-weight: bold;
}Code language: CSS (css)

We applied little padding, and changed the border radious only 5px, applied the top margin to 15px to separate this from top content stats. Finally making the bold font will highlight this button in our profile card and here what it will look finally.