DEV Community

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

Posted on

18 3

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!

Top comments (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 β€’ β€’ Edited

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 β€’

thanks Chaoo! :)