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.
-
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:
We're using CDN for this project. So add this
link
inside the<head>
tag:
<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
- 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
<!-- 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.
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
<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 thediv
-
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
-
shadow-lg:
sets shadow to the div- possible values:
sm | md | lg | xl | 2xl | inner
- possible values:
-
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
-
-
Result:
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 divmain
and set CSS grid to it:
<!-- 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 -
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
- works like
-
h-screen:
sets full viewport height (full width as screen)
-
Result:
Now the card looks much better and visible.
PROFILE PICTURE DIV
<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
-
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%
- works just like
-
py-2:
setspadding-top
andpadding-bottom
values to 0.5rem both -
w-16:
sets image width- sizes the image according to the card (experiment with the values)
Result:
NAME DIV
<div class="name text-gray-800 text-2xl font-medium mt-4 ">
<p>Simp</p>
</div>
-
text-gray-800:
sets thefont-color
property to greyish black -
text-2xl:
increases the font size- possible values:
sm | base | lg | xl | 2xl ...
- possible values:
-
font-medium:
sets thefont-weight
propertylight | normal | medium | semibold | bold
-
mt-4:
setsmargin-top
USERNAME DIV
<div class="username text-gray-500">
<p>@simpyy</p>
</div>
-
text-gray-500:
sets the font color to light gray.
WORK DIV
<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:
setsmargin-top
Now almost everything is done. Let's do the final work of designing the Follow Button.
FOLLOW BUTTON
<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:
setsmargin-top
button:
-
bg-blue-500:
sets the blue color- explore all the possible colors here
-
py-2
andpx-4
: setspadding-bottom
andpadding-top
, respectively -
text-white:
sets thefont-color
to white -
hover:bg-blue-600
: sets the CSS hover properties, in this case we've simply increased the shade from500 to 600
to give it a realistic look.
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 daily.
Would love to connect!
Top comments (5)
ty!
I
m creating index.html on plain text (notepad). I can
t use the "🧑💻" characters. How can I use them ? Chaning text enconding helps ? What enconding is used ?Hm In this case you can make use of unicode character encoding. Like for the emoji 🧑💻, it is a combined emoji set for the other two emojis (👨,💻) so we've to use them combined like:
👨💻
References: W3Schools Emoji Reference
Emojipedia Reference
Solution: Use
👨💻
to get 🧑💻Good stuff 👏
thanks Chaoo! :)