How to Build Responsive Users Card Using TailwindCSS
Tags: webdev, tailwindcss, html
Published: 2023-03-11 09:00:22


![Design inspired from [icodethis](icodethis.com) platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aajody5raddslkzkj0z4.png)

***User Cards*** is a feature designed to enable managers and colleagues to quickly access learner profile data, learning history, goals, and associated job profiles.

It can have different structures, sizes and content. As a matter of fact, a card in design and technology is defined as **a UI design pattern that groups related information in a flexible-size container visually resembling a playing card**.

On the internet, we get in contact with a card or a hybrid from it at least once every day.

It is important or it will be great to know how to build such a component. As it is highly used in almost all web platforms.

Without wasting much time, let's build this up.


![Demo of users card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7mpxz7ung3gdwvraw9z.gif)



## **Understanding the Task**

It’s important to divide your work or design into different parts, I always do that, it helps me break it down into smaller components that I can easily build, then join them all together to form the bigger component.

if you are used to my post, you surely know I call it the *“Divide and Conquer “* approach😉


![Different parts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u12kvn97vng4eb3n7f98.png)


Sincerely speaking, we don't need to separate this into different parts. But to make it a little bit easier to understand, we can divide it into 2 main parts, **Images** and **Summary.**

I couldn't really get nicer names to name the different parts. 😅 Please let's just take it like that.

## **Structure of Code**

As I always say, I have the same structure when it comes to designing components. Simply because I believe they somehow have the same root. 😃

This is how it goes

```xml
<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!-- Images -->
            <div></div>

        <!-- Summary -->
            <div></div>
  </div>
 </div>
    
</body>
```

## Images


![Images part](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ongualmuoscfj8u4by7f.png)

This is what we will be doing here. This beautiful round image wheel.

```xml
<!-- Second Layer -->
<div> 
        <!-- Images -->
    <div>
      <ul class="w-36 h-36 rounded-full border-2 relative [&>*]:absolute [&>*]:w-14 [&>*]:h-14 [&>*]:bg-slate-300 [&>*]:rounded-full [&>*:hover]:scale-110 [&>*]:p-1 [&>*>img]:h-full [&>*>img]:object-cover [&>*>img]:rounded-full">
        <!-- Image 1 -->
       <li class="-top-5 right-12 hover:bg-purple-700">
        <img src="https://yt3.googleusercontent.com/cs7kGRac3WXF6cidW6N9cfDUEc4vYVIWdqQGL6Iuba7uwfLpFxFC0zLqbOblvSFHb1tb0QTz=s900-c-k-c0x00ffffff-no-rj" alt="">
       </li>
         <!-- Image 2 -->
      <li class="top-8 -left-6 hover:bg-blue-600">
        <img src="https://media.licdn.com/dms/image/D4E03AQH7P9arsYmElA/profile-displayphoto-shrink_800_800/0/1671708712233?e=2147483647&v=beta&t=2zGHmVsWVcsifWCCt_FAuZr8vytcaU_nCc-twF-iWCk" alt="">
      </li>
         <!-- Image 3 -->
      <li class="top-8 -right-6 hover:bg-slate-500">
        <img src="https://media.licdn.com/dms/image/C4E03AQEvvbJVGMtDWg/profile-displayphoto-shrink_200_200/0/1577999315397?e=1680739200&v=beta&t=ps3VVA6fmP-zU8pWNZg31wUrD_bTHa0vd6nGoPc2-3g" alt="">
       </li>
          <!-- Image 4 -->
      <li class="-bottom-4 left-1.5 hover:bg-slate-900">
          <img src="https://pbs.twimg.com/profile_images/1627084229174771712/cT6fvHnL_400x400.jpg" alt="">
       </li>
         <!-- Image 5 -->
     <li class="-bottom-4 right-1.5 hover:bg-yellow-500">
       <img src="https://pbs.twimg.com/profile_images/1633405008715685888/HtwI6PCv_400x400.jpg" alt="">
      </li>
     </ul>
    
     </div>
</div>
```

As the name of the section describes, it consists of many profile images (5 to be specific, but you can always customize the number to your liking).

Now let's understand the code we just wrote, I will specifically focus on the main container holding the images.

We gave this container a `width` and `height` of `w-36` and `h-36` respectively, a `border-radius` of `rounded-full` and position it `relative`, in order to allow us to move the different images to a different positions within it.👌

If you are used to my posts, by now you surely know the meaning of `[&>*]` in tailwindcss.

But if you are new, The property **\[&&gt;\*\]** simply means *“select each child individually”*, this allows us to apply the same styling properties to all the immediate children.

To each child, we gave it a `width` and `height` of `w-14` and h-14 respectively, we also gave each of them a `border-radius` of `rounded-full`, `transform` property of `scale-110 on hover` and a `padding` of `p-1`.

We also use a similar approach to select the images inside their containers. This was achieved using **\[&&gt;\*&gt;img\].** In English it can be translated as, *for every immediate child, select the image within it* (Is tailwindcss not wonderful? 😍).

For each of these images, we gave them a `height` and `h-full` made them responsive with `object-cover` and rounded with `border-radius` of `rounded-full`

And that should be pretty much it for the general styling.😃

Specific effects were added to each of the images and were position `absolute` to their `relative` parent container. For example, taking the case of the topmost picture

```xml
        <!-- Image 1 -->
<li class="-top-5 right-12 hover:bg-purple-700">
        <img src="https://yt3.googleusercontent.com/cs7kGRac3WXF6cidW6N9cfDUEc4vYVIWdqQGL6Iuba7uwfLpFxFC0zLqbOblvSFHb1tb0QTz=s900-c-k-c0x00ffffff-no-rj" alt="">
 </li>
```

a `background-color` change effect was applied on `hover`, and it was positioned at the top center using `-top-5` and `right-12`

Similar properties were applied to other images to archive the end result

## Summary

This section is simple and straight to the point

```xml
        <!-- Summary -->
 <div class="flex items-center justify-center flex-col">
        <!-- Description -->
 <div class="w-4/5 text-center  my-8">
   <h2 class="font-bold mb-3">Looking for more inspiration?</h2>
   <p class="text-slate-500 text-xs">Do you want daily inspiration when it comes to web dev and technology? I recommend the above people</p>
  </div>
        <!-- Button -->
 <div class="px-4 py-2 font-semibold text-xs bg-purple-500 text-white rounded-full w-fit cursor-pointer hover:scale-[1.03] active:scale-95 shadow shadow-purple-500">
         <h2>SEE FEATURED CREATIVES</h2>
 </div>
</div>
```

The summary container is a flexbox that is used to center its whole content using `flex items-center justify-center flex-col`

* Description: No extraordinary styling, just `font-weight` of `font-bold`, container `width` of `w-4/5`
    
* Button: This is the call to action button at the bottom of the card. we gave it a `padding-inline` of `px-4` `padding-block` of `py-2` `font-weight` of `font-semibold` `font-size` of `text-xs,` `background-color` of `bg-purple-500,` `border-radius` of `rounded-full` zooming effect on `hover` with `hover:scale-[1.03]`, pressing effect using `active:scale-95` and light purple `box-shadow` effect `shadow shadow-purple-500`

    

![Summary Part](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x84wun8ha5u3n99hydnl.png)

## Layer Styling

Let's apply some styling to the different layers to achieve the design we have

```xml
<body class="bg-slate-200 text-sm flex items-center justify-center min-h-screen">
<!-- First Layer -->
 <div class="w-[18rem] bg-white py-8 rounded-lg relative overflow-hidden [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">
<!-- Second Layer -->
  <div class="flex flex-col justify-center items-center">
        <!-- Images -->
            <div></div>

        <!-- Summary -->
            <div></div>
  </div>
 </div>
    
</body>
```

Here is the result


![Plain design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8lq7bjcyxjy8xne29oz.png)


It doesn’t look bad at all, but it’s kinda too plain for me. Let’s add those before rounded circles to this. 🤓

```xml
<body class="bg-slate-200 text-sm flex items-center justify-center min-h-screen">
<!-- First Layer -->
 <div class="w-[18rem] bg-white py-8 rounded-lg relative overflow-hidden [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">

NEW -> <div class="absolute -right-16 -top-10 bg-slate-100 w-32 h-32 rounded-full"></div>

<!-- Second Layer -->
  <div class="flex flex-col justify-center items-center">
        <!-- Images -->
            <div></div>

        <!-- Summary -->
            <div></div>
  </div>

NEW ->  <div class="absolute -left-10 bottom-24 bg-slate-100 w-16 h-16 rounded-full"></div>
    </div>
 </div>
    
</body>
```

We just added the two circles in our component, position them absolutely then place them in the position seen using left and right properties

You can easily identify this component by looking at **\[NEW\]** in the above code.

And that’s pretty much it. 😍

We just designed a responsive Users Card Component!


![End Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksb3x3rxbgqpcbqur4q9.png)



## **Conclusion**

We just built a simple and responsive Users Card component without opening our CSS file😃. Thanks to Tailwindcss.

Many employers will need such components to be added to their websites, and right now you should be proud that you are one of those few who know how to build it in less than 5mins, and you can do that without even leaving your HTML document 😎.

You can have a Live preview on [Codepen](https://codepen.io/mbianou-bradon/pen/YzjmaeJ) or find the code on [GitHub](https://github.com/mbianou-bradon/icodethis-daily-ui-challenge/tree/main/public/February%202023/Users%20Card)

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additions styling you added to your card.

If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊

See ya! 👋