DEV Community

Cover image for Learn TailwindCSS: Make A Profile Card
Shreya Purohit
Shreya Purohit

Posted on

Learn TailwindCSS: Make A Profile Card

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

  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:

  2. 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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Here's what you see right now.

first
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

<div class="card bg-white flex flex-col items-center justify-center p-4 shadow-lg rounded-2xl w-64">
Enter fullscreen mode Exit fullscreen mode
  • 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
  • shadow-lg: sets shadow to the div
    • possible values: sm | md | lg | xl | 2xl | inner

maindiv

  • 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:

card-div
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:
<!-- parent div -->
<div class="main bg-yellow-400 grid place-items-center h-screen">
Enter fullscreen mode Exit fullscreen mode
  • 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
    • h-screen: sets full viewport height (full width as screen)

Result:

bg
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>

Enter fullscreen mode Exit fullscreen mode
  • 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%
  • 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

NAME DIV

<div class="name text-gray-800 text-2xl font-medium mt-4 ">
      <p>Simp</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • 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

<div class="username text-gray-500">
      <p>@simpyy</p>
</div>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • text-gray-700: changes the font color to gray.
  • mt-4: sets margin-top

fonts

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>
Enter fullscreen mode Exit fullscreen mode

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
  • 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


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!

Discussion (5)

Collapse
crearesite profile image
WebsiteMarket

ty!

Collapse
skylucacius profile image
skylucacius

Im creating index.html on plain text (notepad). I cant use the "🧑‍💻" characters. How can I use them ? Chaning text enconding helps ? What enconding is used ?

Collapse
shreya profile image
Shreya Purohit Author • Edited on

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: &#x1F468‍&#x1F4BB

👨 - &#x1F46
💻 - &#x1F4BB
Enter fullscreen mode Exit fullscreen mode

References: W3Schools Emoji Reference

Emojipedia Reference


Solution: Use &#x1F468‍&#x1F4BB to get 🧑‍💻

Collapse
chaoocharles profile image
Chaoo Charles

Good stuff 👏

Collapse
shreya profile image
Shreya Purohit Author

thanks Chaoo! :)