Learn TailwindCSS: Make A Profile Card
Tags: tailwindcss, css, frontend
Published: 2022-01-17 18:46:03

Tailwind is a CSS framework that lets you build amazing responsive UI with less effort. 
If you're learning TailwindCSS, this blog can help you to build concepts stronger by creating a mini profile card with a button in less than 5 minutes. 


![profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jir3csift2d3h44mginl.jpg)
1. First you need to install Tailwind in your project. Now there are 3 ways as given below. Visit the one you prefer. As this is a simple card, I'll just use CDN:
 - Through CLI (fastest): [read here](https://tailwindcss.com/docs/installation)
 - Through CDN: [read here](https://tailwindcss.com/docs/installation/play-cdn) - `we will use this`
 - As a PostCSS plugin: [read here](https://tailwindcss.com/docs/installation/using-postcss) 

2. We're using CDN for this project. So add this `link` inside the `<head>` tag:
```html
 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
```
---

If you're using React, I have a step-by-step blog on it already. 
*Read it here*: [How to setup TailwindCSS in your React App](https://dev.to/shreya/how-to-setup-tailwind-in-your-project-3075)

---

- Now we're ready to use Tailwind. Let's start by defining the basic structure first:
   - To use the image used in this project, copy [this link](https://www.disneyplusinformer.com/wp-content/uploads/2021/09/The-Simpsons-Profile-Icons-8.png)

```html
   <!-- main - parent div -->
    <div class="main">
		<!--card-->
        <div class="card">
			<!--profile-image-->
			<div class="image">
	            <img src="#" alt="profile">
			</div>
			<!--name-->
			<div class="name">
	            <p>Simp</p>
			</div>
			<!--username-->
			<div class="username">
	            <p>@simpyy</p>
			</div>
			<!--work-->
			<div class="work">
	            <p>Front-end developer 🧑‍💻</p>
			</div>
            <!-- follow button -->
			<div>
	            <button>Follow</button>
            </div>
        </div>
    </div>
```
Here's what you see right now. 
 

 
![first](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvzz63b400sq4rgz9msy.png)
Pretty boring right?
> Let's make it interesting by adding classes that Tailwind provides us:

---

We'll start from top to bottom to avoid confusions. But first I'll pick up the div having a class `"card"`:
 
### **CARD SECTION**

```html
<div class="card bg-white flex flex-col items-center justify-center p-4 shadow-lg rounded-2xl w-64">
```

- `bg-white`: sets the white background to the `div`
- `flex items-center justify-center`: works just as we centre a div using CSS flexbox model. 
	- `flex:` sets display to flex
	- `items-center:` `align-items: center;` in CSS
	- `justify-center:` `justify-content: center;` in CSS
- `p-4:` sets a padding of 1rem
	- check all possible values [here](https://tailwindcss.com/docs/padding)
- `shadow-lg:` sets shadow to the div
	- possible values: `sm | md | lg | xl | 2xl | inner`

![maindiv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guoxqtwh0xueoryt7hnh.png)
 - `rounded-2xl:` sets border radius to the element
	 - `md | lg | full | xl | 2xl`
- `w-64:` We want our card to be of a fixed width so setting it accordingly.
	- Experiment with `w-{number}` and [explore more](https://tailwindcss.com/docs/width#fixed-widths)

#### Result:

![card-div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kldobfbers1eefbg1ttm.png)
Our card has started getting shape, so let's center it and start designing! 

---

### **PARENT (TOPMOST) DIV**

- To center the `card` div, I'd take the parent div `main` and set CSS grid to it:

 ```html
<!-- parent div -->
<div class="main bg-yellow-400 grid place-items-center h-screen">
```
- `bg-yellow-400:` set the yellow background color. 
	- `bg`: background
	- `yellow`: color | try more colors available [here](https://tailwindcss.com/docs/customizing-colors#default-color-palette)
	- `400`: shades | ranges from 50-900
- `grid h-screen place-items-center:` To centre the card div
	- `grid:` sets display to grid
	- `place-items-center`
		- works like `place-items: center;` in css
	- `h-screen:` sets full viewport height (full width as screen)

#### Result:
 
![bg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqlr1yezlh8gsb59k4dg.png)
Now the card looks much better and visible. 

### **PROFILE PICTURE DIV**

```html
<div class="profile mx-auto rounded-full py-2 w-16 "> 
	<img src="/simp.jpg" alt="profile">
</div>

```
- To use the image used in this project, copy [this link](https://www.disneyplusinformer.com/wp-content/uploads/2021/09/The-Simpsons-Profile-Icons-8.png)
- `mx-auto:` sets equal margins to both (left and right) sides, so centres the image
- `rounded-full:` gives the circular shape 
	- works just like `border-radius: 50%`
- `py-2:` sets `padding-top` and `padding-bottom` values to 0.5rem both
- `w-16:` sets image width
	- sizes the image according to the card (experiment with the values)

#### Result:
 
![img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rl62pz7ibprams0h2wr.png)
### **NAME DIV**

```html
<div class="name text-gray-800 text-2xl font-medium mt-4 ">
      <p>Simp</p>
</div>
```
- `text-gray-800:` sets the `font-color` property to greyish black
- `text-2xl:` increases the font size
	- possible values: `sm | base | lg | xl | 2xl ...`
- `font-medium:` sets the `font-weight` property
	- `light | normal | medium | semibold | bold`
- `mt-4:` sets `margin-top`

### **USERNAME DIV**

```html
<div class="username text-gray-500">
      <p>@simpyy</p>
</div>
```
- `text-gray-500:` sets the font color to light gray.

### **WORK DIV**

```html
<div class="work text-gray-700 mt-4">
     <p>Front-end developer 🧑‍💻</p>
</div>
```
- `text-gray-700:` changes the font color to gray.
- `mt-4:` sets `margin-top`
 
![fonts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15mgokbbxs4lztt4rhin.png)

Now almost everything is done. Let's do the final work of designing the *Follow Button*.

### **FOLLOW BUTTON**

```html
<div class="w-full mt-8">
	<button class="bg-blue-500 py-2 px-4 hover:bg-blue-600 text-white w-full font-semibold rounded-lg shadow-lg">
		Follow
	</button>
</div>
```

> *div*:

- `w-full` sets the full width (according to the parent div) so covers the card properly.
- `mt-8:` sets `margin-top`

> *button*:

- `bg-blue-500:` sets the blue color
	- explore all the possible colors [here](https://tailwindcss.com/docs/customizing-colors)
- `py-2` and `px-4`: sets `padding-bottom` and `padding-top`, respectively
- `text-white:` sets the `font-color` to white
- `hover:bg-blue-600`: sets the CSS hover properties, in this case we've simply increased the shade from `500 to 600` to give it a realistic look.
	
![btn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dps19n5nsdjtcags3mb.gif)

---
Congratulations! 🎉 Your follow card is completed now.

> My motive for this post was to make you understand how to add Tailwind classes to a project. I hope I was able to complete this job.

Thanks for reading!

---

I share content related to web development and technical writing on [Twitter](https://twitter.com/eyeshreya) daily. 

Would love to connect!